跟着尚硅谷学vue2—进阶版4.0—Vuex3.0

2. vuex 核心概念

1. state

1. vuex 管理的状态对象

2. 它应该是唯一的

3. 示例代码:

   const state={
       xxx:initValue
   }
   
   

2. actions

1. 值为一个对象，包含多个响应用户动作的回调函数

2. 通过 commit( )来触发 mutation 中函数的调用, 间接更新 state

3. 如何触发 actions 中的回调？ 在组件中使用: $store.dispatch('对应的 action 回调名') 触发

4. 可以包含异步代码（定时器, ajax 等等）

5. 示例代码:

   const actions = {
       zzz ({commit,state},data1){
           commit('yyy',{data1})
       }
   }
   
   

3. mutations

1. 值是一个对象，包含多个直接更新 state 的方法

2. 谁能调用 mutations 中的方法？如何调用？

   在 action 中使用：commit('对应的 mutations 方法名') 触发

3. mutations 中方法的特点：不能写异步代码、只能单纯的操作 state

4. 示例代码：

   const mutations = {
       yyy(state,{data1}){
           // 更新state的某个属性
       }
   }
   
   

4. getters

1. 值为一个对象，包含多个用于返回数据的函数

2. 如何使用？—— $store.getters.xxx

3. 示例代码：

   const getters={
       mmm (state){
           return state.msg + '!'
       }
   }
   
   

5. modules

1. 包含多个 module
2. 一个 module 是一个 store 的配置对象
3. 与一个组件（包含有共享数据）对应