Store选项

回首Vue3之状态管理篇（一）提到了Store在Vuex4.x中的获取方式，不了解的可以传送门看一下。

actions

当我们想更改state的状态时，我们可以通过mutation来更改，也可以通过action更改mutation从而改变state的状态。

action与mutaion很类似，但是它只能交的是 mutation，而不是直接变更状态，而且它可以包含任意异步操作。

在 store 上注册 action。处理函数总是接受 context 作为第一个参数，payload 作为第二个参数（可选）。如下：

createStore({ 
    state:{
        name:"也笑"
    },
    mutations: {
      changeName (state, name) {
        state.name = name
      }
    },
    actions: {
      changeName (context,name) {
        // 这里可以做一些异步处理
        context.commit('changeName',name)
      }
  }
})

以载荷形式分发，提交mutation。

store.dispatch('changeName', "slifree and 也笑")

getters

有时候我们需要从 store 中的 state 中派生出一些状态，就是我们需要的变量是根据state里面的值改变而改变的，我们就可以用getters实现。

我们在 state 里面定义一个 count，而且我们需要一个doubleCount，doubleCount我们就可以通过getter来实现，如下：

createStore({ 
    state:{
        count:0
    },
    getters:{
        doubleCount:state=>{
            return state.count*2
        }
    }
})

这里的实现效果，和在单组件中使用计算属性computed的效果是一样的。

总结

提交 mutation 更改 store 中的状态，派发 action 更改 mutation。action 不能直接修改store 中的状态。

想了解更多文章，传送门已开启：回首Vue3目录篇！

回首Vue3之状态管理篇（二）

Store选项

actions

getters

总结