36.vuex的使用笔记

import { FETCH_REQUEST, FETCH_FAILURE } from '../constant/types'
import authApi from '../../axios/api/auth'

const state = {
 isFetching: false,
 // token
 tokenData: {
   token: null,
   lastUpdated: null
 }
}

// getters
const getters = {
 getToken () {
   return state.tokenData.token
 }
}
//  1.vuex 单方向的数据流操作 action（commit） mutations(mutate)   state
//  2.action  支持异步操作，在请求结果返回之后将需要修改的数据传给mutations
//  每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler),这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
//  3.mutations  只支持同步的操作
const mutations = {
 // 使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
 [FETCH_REQUEST] (state) {
   state.isFetching = true
 },
 [SET_TOKEN] (state, action) {
   state.tokenData = {
     token: action,
     lastUpdated: (new Date()).getTime()
   }
 }
}

// actions   
// async   await保证在数据请求返回之后，在将需要修改的数据commit vuex mutation
const actions = {
 // 获取用户信息  {commit}是参数解构的方式
 async getUserInfo ({commit}) {
   commit(FETCH_REQUEST)
   let result = await authApi.getUserInfo()
   // console.log(result)
   // 根据返回结果commit vuex mutation
   return result
 }
}

export default {
 namespaced: true,
 state,
 getters,
 actions,
 mutations
}

vuex官网地址：https://vuex.vuejs.org/zh/guide/mutations.html