Vuex状态管理模式

Vuex

官方文档

vuex实现共享状态管理，实际就是管理里面的state的相应值

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
     

  state: {
     

    //这里放全局参数

  },

  mutations: {
     

    //这里是set方法

  },

 getters: {
             //这里是get方法   },

 actions: {
     

 
  },

  modules: {
     

//这里是我自己理解的是为了给全局变量分组，所以需要写提前声明其他store文件，然后引入这里

  }

})

• state： 相当于组件中的data，专门用来存放全局的数据
• getters: 相当于组件中的computed,但是getters是全局的，computed是组件内部使用上的
• mutations: 相当于组件中的methods,但是它不能使用异步方法（定时器，axios）
• action： 专门用来处理异步，实际修改状态值依然是mutations
• modules： 模块化，给全局变量分组，所以需要写提前声明其他store文件，然后引入这里

Tips:

• 数据较多可以使用拆分写法
  

• 模块较多可以使用命名空间
  

• mutations_type,将方法统一到对象中便于管理
  

• map* 辅助函数 可以使代码更简洁
  
  注意：

1. store 中存储的状态是响应式的，当组件从store中读取状态时，如果store中的状态发生了改变，那么相应的组件也会得到更新；

2. 不能直接改变store中的状态。改变store中的状态的唯一途径是提交(commit)mutations。这样使得我们可以方便地跟踪每一个状态的变化。

应遵循的规则：

1. 应用层级的状态都应该集中在store中

2. 提交 mutation 是更改状态state的唯一方式，并且这个过程是同步的。

3. 异步的操作应该都放在action里面

详见：https://blog.csdn.net/yusirxiaer/article/details/99634868