Vuex

2022-09-09 周五

Vuex官方文档

什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

把各个组件公用的数据放到一个仓库里面进行统一的管理，这样既使得非父子组件间的数据共享变得简单明了，也让程序变得更加可维护（将数据抽离了出来）,而且只要仓库里面的数据发生了变化，在其他组件里面数据被引用的地方也会自动更新。

---

Vue中的单向数据流

View（视图）、Actions（响应状态变化，可以简单理解为methods等等）、State（数据源，简单理解就是数据）。从图中的箭头我们可以看出，我们通过Actions改变State（数据），然后View（视图）更新，这一个过程是单向的，不会发生View（视图）改变了，然后State（数据）更新的情况，这使得我们的数据可控。

什么情况下使用Vuex

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

项目结构

this.$store

我们最开始把vuex挂载到了根组件上去，所以我们在任何地方都可以调用router一个道理，就像是调用store这个大仓库里面的属性一样。

1. store：定义全局变量
   访问方法：store.state.xxx
2. mutations：

• 定义方法、更改 Vuex 的 store 中的状态的唯一方法是提交 mutation、不能直接修改全局变量
• 这个选项更像是事件注册
• 必须是同步函数

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

3. commit：触发方法
4. mapState：辅助函数，批量引入全局变量
5. getters：store的计算属性，针对全局变量的计算方法

• 访问方法：store.getters.xxx

6. action

• Action 提交的是 mutation，而不是直接变更状态【Actions不能直接更改数据，它的作用是提交Mutations，Mutations里面包含的才是具体操作数据的方法】
• Action 可以包含任意异步操作
• Action 通过 store.dispatch 方法触发
• 在组件methods中调用

this.$store.dispatch('countAdd',10)

• 在组件中分发action

...mapActions(['xx','yy'])

• 定义actions方法

 actions: {
    //接收组件传过来的参数num，Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
        countAddFn(context,num){
            context.commit('countAdd',num)
        }
    }
 mutations: {
    //传入一个state对象，接收传过来的参数num
        countAdd(state,num){
            state.count+=num
        }
    }

7. Module

• 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿
• 为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
• 嵌套模块会继承父模块的命名空间