vuex使用

  1. 全局状态管理插件,组件之间的通信,数据共享。

  2. 引入vuex,并且Vue.use(Vuex)

  3. 在store(仓库)下的index.js 这份文件,就是用来做状态管理

    在main.js下,引入store,并且在new Vue({ xxx,xxx,store}),挂载到vm身上,将store变成全局仓库,这样任何组件都可以使用到store下面的状态

alt

什么时候使用vuex

  1. 多个组件依赖同一状态
  2. 来自不同组件的行为需要变更同一状态

各个部分

1. state

state相当于组件中的data,专门用来存放全局的数据

在组件中可以直接使用,{{ $store.state.num }}

alt

2. mutations

mutations是改变state的唯一地方。相当于组件中的methods,但是它不能使用异步方法(定时器、axios)

(对象的形式;key: value;这里的key是函数名,value是一个匿名箭头函数,匿名函数第一个参数是state,第二个参数是commit传过来的值)

比如:SET_TOKEN 这个函数,在下面actions中会有commit过来,对应改变token值,因为只有mutations才能修改state的值

alt

3. action

actions专门用来处理异步任务,但实际修改状态值state的依然是mutations。我们也用commit 向 mutations提交操作请求,从而修改state。

alt

4. getters

getters 相当于组件中的computed,getters是全局的,computed是组件内部使用的

每个函数都有一个默认参数state

将组件中统一使用的computed都放到getters里面来操作

alt