前言

????????????
????个人主页: 阿选不出来
????????????
????个人简介: 一名大二在校生, 不定时更新自己学习道路上的一些笔记.
????????????
????目前开发的专栏: JS ????Vue????JS进阶
????????????
????接上一篇 Vue-条件,列表渲染-key的底层原理

vuex

1.什么是vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

2.什么时候用Vuex

1. 多个组件依赖于同一状态.
2. 来自不同组件的行为需要变更同一状态.

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用，使用 Vuex
可能是繁琐冗余的。如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

3.搭建vuex环境

1. 安装:

npm install vuex@next --save

2. 创建文件: src/store/index.js

// 引入Vue核心库
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
//准备actions对象---响应组件中用户的动作
const actions = {}
//准备mutation对象---修改state中的数据
const mutation = {}
//准备state对象---保存具体的数据
const state = {}
// 创建并暴露store
export default new Vuex.store({
actions,
mutation,
state
})

在 main.js中创建vm时传入 store配置项

......
// 引入store
import store from './store'
......
//创建vm
new
Vue({
el: '#app',
render: h => h(app),
store
})

4.五个核心

基础使用:

1. 初始化数据, 配置 action, 配置 mutations , 操作文件 store.js

// 引入Vuex 核心库
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 引用Vuex
Vue.use(Vuex)
const actions = {
//响应组件中的动作
jia(context, value) {
context.commit('JIA',value)
},
jian(context, value) {
context.commit('JIAN', value)
}
}
const mutations = {
//执行加
JIA(state, value) {
state.sum += value
}
}
// 初始化数据
const state = {
sum:0
}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
})

2. 组件中读取vuex中的数据: $store.state.sum
3. 组件中修改vuex中的数据: $store.dispatch('action中的方法名', 数据) 或 $store.commit('mutation中的方法名', 数据)

$$备注:若没有网络请求或其他业务逻辑,组件中也可以越过actions,既不写dispatch,直接编写commit$$

State

用于初始化数据，提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，相似与data

组件内通过 this.$store.state.count 访问到.
HTML内通过 $store.state.count 访问到.

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

mutations: {
increment (state) {
// 变更状态
state.count++
}
}

调用
在组件中使用:this.$store.commit('increment')
提交载荷 : this.$store.commit('increment',10) 你可以向 store.commit 传入额外的参数，即 mutation 的载荷（payload), 参数可以是字符串也可以是对象.
对象风格的提交方式:

this.$store.commit({
type: 'increment',
amount: 10
})

注意::: mutation 必须是同步函数

Action

Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。

使用-参数
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
调用
在组件内 : this.$store.dispatch('increment')

// 以载荷形式分发
this.$store.dispatch('incrementAsync', {
amount: 10
})
// 以对象形式分发
this.$store.dispatch({
type: 'incrementAsync',
amount: 10
})

getters

1. 概念: 当state中的数据需要经过加工后在使用时, 可以使用getters加工.
2. 在 store.js 中追加 getters 配置

......
const getters = {
bigSum(state){
return state.sum * 10
}
}
//创建并暴露store
export default new Vuex.store({
......
getters
})

3. 组件中读取数据: $store.getters.bigSum

Modules

1. 目的: 让代码更好维护, 让多种数据分类更加明确.
2. 修改 store.js

const countAbout = {
namespaced:true,
actions:{.....},
mutations:{.....},
state:{......},
getters:{...},
}
const personAbout = {
namespaced:true,
actions:{.....},
mutations:{.....},
state:{......},
getters:{...},
}
const store = new Vue.store({
modules: {
countAbout,
personAbout
}
})

3. 开启命名空间后, 组件中读取state数据:

// 方式一: 自己直接读取
this.$store.state.personAbout.list
// 方式二: 借助mapState读取
...mapState('countAbout',['sum','school', 'subject'])

4. 开启命名空间后, 组件中读取getters数据:

// 方式一: 自己直接读取
this.$store.getters['personAbout/firstPersonName']
// 方式二: 借助mapGetters读取
...mapGetters('countAbout',['bigSum'])

5. 开启命名空间后, 组件中调用dispath

// 方式一: 自己直接dispath
this.$store.dispath('personAbout/addPersonWang', person]
// 方式二: 借助mapActions读取
...mapActions('countAbout',{incrementOdd: 'jiaOdd', incrementWait: 'jiaWait'})

6. 开启命名空间后, 组件中调用commit

// 方式一: 自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
// 方式二: 借助mapMutations读取
...mapMutations('countAbout',{increment: 'JIA', decrement: 'JIAN'})

5.四个map方法的使用

1. mapState方法: 用于帮助我们映射 state 中的数据为计算属性.

   computed: {
   //借助mapState生成计算属性, sum,school,subject (对象写法)
   ...mapState({sum:'sum', school:'school', subject:'subject'})
   //借助mapState生成计算属性, sum,school,subject (数组写法)
   ...mapState(['sum','school','subject'])
   }
   

   2.**mapGetters方法:**用于帮助我们映射 getters中的数据为计算属性.

   computed: {
   //借助mapGetters生成计算属性, bigSum (对象写法)
   ...mapGetters({bigSum:'bigSum'}),
   //借助mapGetters生成计算属性, bigSum (数组写法)
   ...mapGetters(['bigSum']),
   }
   

   3. **mapActions方法:**用于帮助我们生成与 action 对话的方法, 即 : 包含 $store.dispath(xxx) 的函数

   methods: {
   //靠mapActions生成, incrementOdd, incrementWait (对象形式)
   ...mapActions({incrementOdd:'jiaOdd', incrementWait:'jiaWait'}),
   //靠mapActions生成, incrementOdd, incrementWait (数组形式)
   ...mapActions(['jiaOdd','jiaWait']),
   }
   

   4. mapMutations方法: 用于帮助我们生成与 mutations 对话的方法, 即: 包含 $store.commit(xxx) 的函数

   methods: {
   //靠mapMutations生成, increment, decrement (对象形式)
   ...mapActions({increment:'JIA', decrement:'JIAN'}),
   //靠mapMutations生成, JIA,JIAN (数组形式)
   ...mapActions(['JIA','JIAN']),
   }
   

   ????????????写在最后

• 看到这里有没有收获什么呢?????????????

• ????????有错误的地方可以在评论区留言,本博会虚心改正的

• 觉的博主写的不错的,可以给个一键三连lia~✨✨

最后

以上就是朴实月饼为你收集整理的【Vue】vuex-五个核心vuex????????????写在最后的全部内容，希望文章能够帮你解决【Vue】vuex-五个核心vuex????????????写在最后所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。