TIP 👉 官网解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
当我们多个页面需要共享数据时就可以使用Vuex。比如:
Vuex 背后的基本思想,借鉴了 Flux、Redux。与其他模式不同的是,Vuex 是专门为 Vue 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
让我们创建这几个文件
action-types.js
// 获取用户信息 export const QUERY_USER_INFO = "QUERY_USER_INFO"
mutation-types.js
// 设置用户信息 export const SET_USER_INFO = 'SET_USER_INFO'
在modules下面创建一个base.js文件
base.js
import { QUERY_USER_INFO } from '../action-types' import { SET_USER_INFO, SET_CUR_MENU_ID } from '../mutation-types' import api from '@/assets/js/api.js' // 创建state const state = { // 用户信息 userInfo: {}, } // 异步获取数据,commit给mutations,mutations改变state const actions = { /* 获取用户信息 */ [QUERY_USER_INFO] ({ commit }, params) { return api.get({ url: '/system/getUser', }, params.vm).then(data => { commit(SET_USER_INFO, data) return data }) } } const getters = { // 当前用户信息 userInfo: state => state.userInfo } // 同步获取 const mutations = { [SET_USER_INFO] (state, data) { state.userInfo = data } } export default { state, actions, getters, mutations }
index.js
mport Vue from "vue" import Vuex from "vuex" import base from "./modules/base.js" Vue.use(Vuex); export default new Vuex.Store({ modules: { base } })
Header.vue
<span>{{$store.getters.userInfo.name}}</span>
main.js
import Vue from 'vue' import store from './store' import { QUERY_USER_INFO } from '@/store/action-types.js' store.dispatch(QUERY_USER_INFO, {}).finally(() => { new Vue({ router: router(store), store, render: h => h(App) }).$mount('#app') })