vuex的核心概念

Vuex 状态管理 相对于 超全局变量（加强版的data），可以响应式，

• 可以携带token，用户的登录状态，类似cookie，session（），多个组件共享的数据
• 商品的收藏、购物车中的物品
• 传递的层数太多

1). state

vuex管理的状态对象 它应该是唯一的

/*状态对象模块*/
import storageUtils from '../utils/storageUtils'//这里是用缓存的数据

export default {
  todos: storageUtils.readTodos()
}

2). mutations

包含多个直接更新state的方法(回调函数)的对象

谁来触发: action中的commit('mutation名称')

只能包含同步的代码, 不能写异步代码

//mutation-types.js
/*包含n个 mutation 名称常量 */
export const ADD_TODO = 'add_todo' // 添加todo

/*包含n个用于直接更新状态的方法的对象模块 */

import {ADD_TODO} from './mutation-types'

export default {
  [ADD_TODO] (state, {todo}) {  // 方法名不是ADD_TODO, 而是add_todo
    state.todos.unshift(todo)
  },

3). actions

包含多个事件回调函数的对象

通过执行: commit()来触发mutation的调用, 间接更新state

谁来触发: 组件中: $store.dispatch('action名称') // 'zzz'

可以包含异步代码(定时器, ajax)

/*包含n个用于间接更新状态的方法的对象模块*/
import {ADD_TODO} from './mutation-types'

export default {
  addTodo ({commit}, todo) {
    // 提交一个comutation请求
    commit(ADD_TODO, {todo}) // 传递给mutation的是一个包含数据的对象
  },
}

4). getters

包含多个计算属性(get)的对象

谁来读取: 组件中: $store.getters.xxx

/*包含n个基于state的getter计算属性方法的对象模块*/
export default {
  // 总数量
  totalSize (state) {
    return state.todos.length
  },

5). modules

包含多个module

一个module是一个store的配置对象

与一个组件(包含有共享数据)对应

6). 向外暴露store对象

export default new Vuex.Store({
	state,
	mutations,
	actions,
	getters
})

7). 组件中:

import {mapGetters, mapActions} from 'vuex'
export default {
	computed: mapGetters(['mmm'])
	methods: mapActions(['zzz'])
}

{{mmm}} @click="zzz(data)"

8). 映射store

main.js
import store from './store'
new Vue({
	store
})

9). store对象

• 1.所有用vuex管理的组件中都多了一个属性$store, 它就是一个store对象

• 2.属性:

  state: 注册的state对象

  getters: 注册的getters对象

• 3.方法:

  dispatch(actionName, data): 分发action