vuex使用
-
全局状态管理插件,组件之间的通信,数据共享。
-
引入vuex,并且Vue.use(Vuex)
-
在store(仓库)下的index.js 这份文件,就是用来做状态管理
在main.js下,引入store,并且在new Vue({ xxx,xxx,store}),挂载到vm身上,将store变成全局仓库,这样任何组件都可以使用到store下面的状态
什么时候使用vuex
- 多个组件依赖同一状态
- 来自不同组件的行为需要变更同一状态
各个部分
1. state
state相当于组件中的data,专门用来存放全局的数据。
在组件中可以直接使用,{{ $store.state.num }}
2. mutations
mutations是改变state的唯一地方。相当于组件中的methods,但是它不能使用异步方法(定时器、axios)
(对象的形式;key: value;这里的key是函数名,value是一个匿名箭头函数,匿名函数第一个参数是state,第二个参数是commit传过来的值)
比如:SET_TOKEN 这个函数,在下面actions中会有commit过来,对应改变token值,因为只有mutations才能修改state的值
3. action
actions专门用来处理异步任务,但实际修改状态值state的依然是mutations。我们也用commit 向 mutations提交操作请求,从而修改state。
4. getters
getters 相当于组件中的computed,getters是全局的,computed是组件内部使用的
每个函数都有一个默认参数state
将组件中统一使用的computed都放到getters里面来操作