#1.Vuex是什么
Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。
当我们的应用遇到多个组件共享状态（数据）时，就可以用到Vuex了。
#2.Vuex的使用
安装完VueX后，在项目的src目录下新建store文件夹，然后在store目录下新建index.js。（使用最新的Vue-CLI 4.x.x安装Vuex会自动配置好以下步骤）
在store/index.js中 导入 Vuex 包并创建 Store 对象
```
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
getters:{
}
})
```
在main.js中将 store 对象挂载到 vue 实例中
```
import store from './store'
//.....
new Vue({
render: h => h(App),
// 将创建的共享数据对象，挂载到 Vue 实例中
// 所有的组件，就可以直接从 store 中获取全局的数据了
store,
}).$mount('#app')
```
#3.Vuex的核心概念
Vuex 中的主要核心概念如下：
- State
- Mutation
- Getter
- Action
在上面的index.js中我们也可以看到一个Store对象就包含了这几个对象
##3.1 State
State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 state 中进行存储。
###3.1.1创建数据
```
export default new Vuex.Store({
state: { num: 0 }
})
```
然后我们在组件中访问 state 中数据的有两种方式：
###3.1.2访问数据的第一种方式
this.$store.state.全局数据名称 //访问刚刚创建的num就是
```
this.$store.state.num
```
###3.1.3访问数据的第二种方式
// 1. 从 vuex 中按需导入 mapState 函数
```
import { mapState } from 'vuex'
//.....
// 2. 将全局数据，映射为当前组件的计算属性
computed: {
...mapState(['num'])
}
```
###3.1.4组件代码与效果图
```
num : {{this.$store.state.num}}
num : {{num}}
```
##3.2 Mutation
mutations 用于变更 Store中 的数据。
只能通过 mutations变更 Store 数据，不可以直接操作 Store 中的数据。
通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。
###3.2.1定义Mutation
```
export default new Vuex.Store({
state: {
num:0
},
mutations: {
numAddOne(state){
//num自增1
state.num++;
}
}
})
```
和访问state数据一样，我们在触发mutations也有两种方式
###3.2.2 触发Mutation的第一种方式
```
methods:{
addOne(){
this.$store.commit('numAddOne') //触发 mutations 的第一种方式
}
}
```
###3.2.3定义Mutation(带参数)
```
mutations: {
//n为参数
numAddN(state,n){
//num自增n
state.num+=n;
}
},
```
###3.2.3 触发Mutation的第二种方式
```
import {mapMutations } from "vuex";//从 vuex 中按需导入 mapMutations 函数
//...
methods:{
...mapMutations(['numAddN']),// 将指定的 mutations 函数，映射为当前组件的 methods 函数
}
```
###3.2.4 组件代码与效果图
```
num : {{this.$store.state.num}}
num : {{num}}
```
##3.3 Action
Action 用于处理异步任务。
如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发 Mutation的方式间接变更数据。
###3.3.1定义Action
```
export default new Vuex.Store({
state: {
num: 0
},
mutations: {
numAddOne(state) {
//num自增1
state.num++;
}
},
actions: {
numAddOneAsync(context) {
setTimeout(() => {
context.commit('numAddOne')
}, 1000)
}
}
})
```
###3.3.2 触发Action的第一种方式
```
methods:{
addOneAsync(){
this.$store.dispatch('numAddOneAsync')//触发 Action
}
}
```
###3.3.3 定义Action(带参数)
```
export default new Vuex.Store({
state: {
num: 0
},
mutations: {
numAddN(state, n) {
//num自增n
state.num += n;
}
},
actions: {
//n为参数
numAddNAsync(context,n) {
setTimeout(() => {
context.commit('numAddN',n)
}, 1000)
}
}
})
```
###3.3.4 触发Action的第二种方式
```
//从 vuex 中按需导入 mapActions 函数
import { mapActions } from 'vuex'
//.....
//将指定的 actions 函数，映射为当前组件的 methods 函数
methods: {
...mapActions(['numAddNAsync'])
}
```
###3.3.4 组件代码与效果图
```
num : {{this.$store.state.num}}
num : {{num}}
```
##3.4 Getter
Getter 用于对 Store 中的数据进行加工处理形成新的数据。
Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性 。
Store 中数据发生变化，Getter 的数据也会跟着变化。
###3.4.1 定义 Getter
```
export default new Vuex.Store({
state: {
num: 0
},
getters: {
//定义Getter
NumText(state ){
return '当前的num值为: '+ state.num
}
}
})
```
###3.4.2 使用Getter
使用 getters 的第一种方式
```
this.$store.getters.名称 //这里就是 this.$store.getters.NumText
```
使用 getters 的第二种方式
```
import { mapGetters } from 'vuex'
//.....
computed: {
...mapGetters(['NumText'])
}
```
###3.3.4 组件代码与效果图
```
{{this.$store.getters.NumText}}
{{NumText}}
```
————————————————
版权声明：本文为CSDN博主「摸鱼moyv」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44042074/article/details/107130815
junjie
