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* 辅助函数 可以使代码更简洁
注意:
-
store 中存储的状态是响应式的,当组件从store中读取状态时,如果store中的状态发生了改变,那么相应的组件也会得到更新;
-
不能直接改变store中的状态。改变store中的状态的唯一途径是提交(commit)mutations。这样使得我们可以方便地跟踪每一个状态的变化。
应遵循的规则:
-
应用层级的状态都应该集中在store中
-
提交 mutation 是更改状态state的唯一方式,并且这个过程是同步的。
-
异步的操作应该都放在action里面
详见:https://blog.csdn.net/yusirxiaer/article/details/99634868