刚开始接触Vuex，总是会把其中的概念搞混淆，然后弄得一头雾水，这次总结记录一下，为下次节省时间

1.state 公共数据源

使用方法：

第一种方式

this.$stroe.state.全局数据名称（页面使用不用加this）

第二种方式

1.从vuex中按需导入 mapstate 函数

 import { mapstate } from 'vuex'

2.通过刚才道德mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性

 computed:{
     ...mapState(['count'])
 }

2. Mutation 用于变更Store中的数据

2.1 只能通过mutation 用于变更Store 中的数据，不可以直接操作 Store 中的数据

2.2 通过这种方式虽然操作起来稍微繁琐一点，但是可以集中监控所有数据的变化。

 // 定义 Mutation 
 const store = new Vuex.Store({
     state: {
         count:0
     },
     mutations:{
         add(state){
             //变更状态
             state.count++
         }，
         addSetTimeout({
             //不要在mutations中执行异步操作
             setTimeout(()=>{
               state.count++
             },1000)
         })
     }
 })
 

 // 在vue或者组件中使用 Mutation 第一种方式
 this.$store.commit('add')

 // 在vue或者组件中使用 Mutation 第二种方式
 import { mapMutations } from 'vuex'
 export default {
     methods:{
         ...mapMutations(['add'])
         btnHandlerl(){
             this.add()
         }
     }
 }

3. Action 专门用来处理异步任务

如果通过异步操作变更数据，必须通过Action，而不是使用Mutations，但是在Action中还是要通过触发Mutation的方式简介变更数据。

 // 定义Action
 const store - new Vuex.Store({
     // ...省略其他代码
     mutations:{
         add(state,step/*step代表可以增加传入的参数*/){
             //变更状态
             state.count++
         }
     },
     actions:{
         addAsync(context){
             setTimeout(()=>{
                 // 在Action 中，不能直接修改 state 中的数据，
                 // 必须通过 context.commit()触发某个 mutation 才行
                 context.commit('add')
             },1000)
         }
     }
 })

 // Action使用
 //这里的 dispatch 函数 专门用来触发 action
 this.$store.dispatch('addAsync')

3.1 触发actions 异步任务时携带参数：

 // 定义Action
 const store - new Vuex.Store({
     // ...省略其他代码
     mutations:{
         addN(state, step){
             //变更状态
             state.count += step
         }
     },
     actions:{
         addNAsync(context, step){
             setTimeout(()=>{
                 // 在Action 中，不能直接修改 state 中的数据，
                 // 必须通过 context.commit()触发某个 mutation 才行
                 context.commit('addN', step)
             },1000)
         }
     }
 })

 // Action使用
 //这里的 dispatch 函数 专门用来触发 action
 this.$store.dispatch('addNAsync', 5)

3.2 触发actions 的第二种方式

 // 从 Vuex中按需导入 mapActions 函数
 import { mapActions } from 'vue'

通过刚才导入的mapActions函数， 映射为当前组件的 methods 方法

 // 将指定的 actions 函数，映射为 当前组件的 methods 函数
 methods: {
     ...mapActions(['addAsync', 'addNAsync']),
     BTNHandler3(){
         this.subAsync()
     }
 }

如果页面使用actions，在通过导入的mapActions函数映射为当前组件的 methods 方法，然后在页面直接使用

 methods: {
     ...mapActions(['addAsync', 'addNAsync'])    
 }

 <button @click="addAsync">addAsync</button>
 <button @click="addNAsync">addNAsync</button>

4. Getter 用于对 Store 中的数据进行加工处理形成的数据

4.1 Getter 可以对 Store 中已有的数据加工处理之后形成新的数据， 类似Vue 的计算属性

4.2 Store 中数据发生变化， Getter 的数据也会跟着发生变化。

 // 定义 Getter
 const store = new Vuex.Store({
     state:{
         count: 0
     },
     getters:{
         showNum: state =>{
             return '当前最新的数量是【' + state.count + '】'
         }
     }
 })

使用 getters 的第一种方式

 this.$store.getters.showNum

以上就是vuex的使用方法与总结