小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

我们都知道状态管理Vuex4.x与Vuex3.x相比发生了一些变化，我们在接下来的学习中边学习Vue4.x的用法，边了解它发生变化的地方。

Store选项

首先，我们要创建一个 store 实例，这与Vuex3.x是不一样的，如下：

import { createStore } from 'vuex'
const store = createStore({ ...options })

上述代码中的 options，就是我们要讲的内容。

state

当我们需要的数据，会被很多组建共用或者牵涉到很多的层级嵌套，我们就可以把数据定义到state里面。这是因为 Vuex 的状态存储是响应式的，从 store 实例中读取状态，如下：

定义数据

createStore({ 
    state:{
        name:"也笑"
    }
})

获取数据

在项目开发中，我们一般是通过辅助函数 mapState 和 this.$store.state.name的方式来获取数据。

mutations

我们需要注意的是：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，也就是说当我们想改变name的值时候，我们只有通过提交 mutation来改变，如下：

createStore({ 
    state:{
        name:"也笑"
    }，
    mutations: {
      changeName (state, name) {
        state.name = name
      }
    }
})

我们需要主要的是mutation里面的方法可以传两个参数：state 和你需要的数据，第二个参数可不写。如果我想把name变为slifree，那么就可以这么做：

store.commit('changeName','slifree')

总结

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。在我们想去修改 state 数据的时候，我们可以commit 一下。

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