背景

放弃总线的原因 

Vuex的学习方法

Vuex的核心思想

状态管理的核心是如下三方面：

接下来我谈一下个人对这三个核心的理解：

按我的转义，大家心里可以有一个简单的整体理解，就是vuex提供放数据的地方，这些数据不推荐直接取，而是用它推荐的API去操作，像绑定其他变量一样使用，页面自动渲染。 实战分解部分，我会讲清楚，state写在什么地方，vuex的index.js里都提供什么，我们的组件中怎么使用。

Vuex的集成

• 单独安装命令

•  如果是用cli脚手架生成的项目会自动集成，通常都在store目录下。

• index.js代码如下：

• 在main.js中引入store

• 以上代码都是脚手架自动生成的，直接拿来用就可以了，我的这些都是最新版本基于vue3.0的，cli4以后的。
• 到此vuex的集成就结束了。

Vuex的实战分解

实战我从两个方面讲解，一是vuex中都定义什么（即store中怎么编码），而是组件中都怎么使用。这些写法都是固定的套路，大家先背过，后面想怎么写就怎么写。

1.store中的固定写法：

import { createStore } from "vuex";

export default createStore({
  state: {
    todos: [
      { id: 1, text: "...", done: true },
      { id: 2, text: "...", done: false }
    ],
    count: 0
  },
  getters: {
    doneTodos(state) {
      return state.todos.filter(todo => todo.done);
    }
  },
  mutations: {
    increment(state) {
      // mutate state
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit("increment");
    }
  },
  modules: {}
});

2.组件中的具体使用写法：

总结