vuex 的理解

介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 [devtools extension]提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能

目录结构

-- store　　　# Vuex的根目录 -- modules　　#可以理解为该文件夹下每个js模块就是一个store　 -- user.js #demo: 用户登陆后的信息模块 -- index.js # 对外导出store -- mutation-types.js #抽离出来的存放各种 mutation 事件类型的模块 index.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user' 
Vue.use(Vuex) 
const debug = process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'production-runtime' 
export default new Vuex.Store({ 
    modules: { 
        user
    },
    strict: debug, plugins: debug ? [createLogger()] : [] })

user.js

import * as types from '../mutation-types'
// initial 
state const state = { 
    userInfo: {}
}
// getters
const getters = { 
    getUserInfo: state => state.userInfo
} 
// actions 
const actions = { 
    setUserInfo ({commit}, user) { 
        commit(types.SET_USER_INFO, user) 
    } }
// mutations 
   const mutations = { 
   [types.SET_USER_INFO] (state, userInfo) { 
       state.userInfo = userInfo 
      } } 
   export default { state, getters, actions, mutations }

main.js 这里只引入部分代码

import store from './store' 
const app = new Vue({ 
    ... store 
}).$mount('#app')

login (creds) {
return getApiJson(LOGIN_API, creds)
    .then((res) => {
      if (res) { 
           // user: 存储用户信息的对象
           let user = { 
           loginName: res.user.loginName, 
           avatarId: res.user.avatarId,
           employeeId: res.user.typeInstanceId, 
           userId: res.id,
           name: res.user.name,
           token: res.token 
       } // 通过store去分发setUserInfo(Action)+载荷user 
       store.dispatch('setUserInfo', user) 
       this.user.authenticated = true 
     // 存储token与用户信息在sessionStorage 
         sessionStorage.token = res.token
         sessionStorage.user = JSON.stringify(user) 
         }
         })
     },