Vuex(vue 项目中实现 频繁、大范围数据共享的技术方案)

参考文档(点击查看)
好处
1.数据的存取一步到位，不需层层传递
2.数据的流动非常清晰
3.存储在Vuex中的数据都是响应式的（数据更新后，使用数据的组件都会自动更新）

Vuex基础配置

npm i vuex@3.6.2

state中用来存储数据，组件中直接使用 语法：$store.state.变量名

vuex配置成功的标志

getters是Vuex中的计算属性（与state同级）(和组件中的计算属性一样，但是不支持set修改)

getters的基本使用

借助辅助方法使用state和getters(简写，当成组件的属性、方法使用)

参考文章

直接调用

借助辅助方法使用

mutations更新数据(要开启严格模式，防止小白直接在组件中修改数据)（修改state数据的唯一途径）(mutations所有方法不支持异步更新，actions用来处理异步任务)

基本使用

举例
在组件中通过@click="变量++"
这样的修改方法修改变量的值时，vue调试工具容易抓取不到 

const store = new Vuex.Store({
  /* 这里配置Vuex */
  // 开启vuex的严格模式，就绝对的不允许在组件中直接修改 state 数据；如果修改就报错
  strict: true, 
  state: {
    age: 20,
    username: 'zhangsan'
  },
  mutations: {
    updateAge(state, newVal) {
      // 第1个参数state是固定的，表示前面的state对象，通过它可以方便的找到state中的数据
      // 第2个参数及后续参数，需要调用时传递进来
      state.age = newVal
    }
  }
})

调用mutation方法的语法
<button @click="$store.commit('方法名',方法的第二个参数，方法的第三个参数...)"

actions（mutation是修改state数据的唯一途径，不能在actions里修改state数据，可以通过传入stroe对象，stroe对象调用mutation方法修改state数据）

基本使用

调用actions方法的语法
<button @click="$store.dispatch('方法名',方法的第二个参数，方法的第三个参数...)"

分模块（将store的index.js文件进行拆分）

通过 modules 可以 以模块化的方式存储数据。

实际开发中，在Vuex中存储的数据可能比较多，如果把全部数据、方法、计算属性都放到 src/store/index.js 中，无疑很难维护。

我们可以分门别类的将数据存储到不同的模块中：

比如将 任务列表相关数据、方法存储到 src/store/todo.js 中
比如将 用户相关数据、方法存储到 src/store/user.js 中
…
这样，更加利用数据的维护，更适合大项目。

|- src
	|- store
		|- modules
			|- cart.js     购物车数据、方法
    		|- todo.js     放任务列表数据
    		|- ......
  		|- index.js    vuex的入口，导入 cart.js 和 todo.js，注册为模块
    

模块文件要开启命名空间，可以解决不同模块之间成员名称冲突的问题。
组件中调用 state数据、mutations方法、actions方法、getters计算属性时，都需要加模块名（指出是哪个模块中的东西）
参考文章