Vue + ElementUI 实现后台管理系统模板 -- 前端篇（七）：引入 vuex 进行状态管理vuex指的是一种

一、引入 vuex 进行状态管理

1、简介

vuex指的是一种状态管理模式，集中式管理所有组件的状态（管理数据）。

【vuex 官方文档：】
    https://vuex.vuejs.org/zh/guide/

使用场景分析：

Home.vue 页面中，Header 部分有个折叠按钮，点击之后，可以折叠与展开 Aside 组件，这之间就设计到数据在组件间的共享。

使用 vuex 后，数据统一管理，当数据发生变化时，其所有引用的地方均会修改。

2、安装、模块化使用 vuex

1》安装
项目构建时，已经安装过了。
可以使用 npm 手动安装，然后在 vuex 中全局引入。

npm install vuex -S

注意：如果初始化项目时选择了vuex，一定要删除根目录下原有store.js文件

2》引入 vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

3》根据功能拆分成各个模块
所有的状态管理写在一个 js 里，不方便维护。
可以根据不同的功能，抽取去不同的模块 js 进行处理。
比如：登录模块可以定义 user.js 去处理、公共模块可以定义 common.js 去处理。

如下：定义一个 user.js，其中 state 管理一个 userName 数据，当登录成功时，保存该数据，并显示在主页面的右上角。

export default {
  // 开启命名空间（防止各模块间命名冲突），访问时需要使用 模块名 + 方法名
  namespaced: true,
  // 管理数据（状态）
  state: {
    // 用于保存用户名
    userName: 'Admin'
  },
  // 更改 state（同步）
  mutations: {
    updateName(state, data) {
      if (data) {
        state.userName = data
      } else {
        state.userName = 'Admin'
      }
    }
  },
  // 异步触发 mutations
  actions: {
    updateName({
      commit,
      state
    }, data) {
      commit("updateName", data)
    }
  }
}

getter文件

const getters = {
  userName: state => state.userName,
}
export default getters

4》将定义好的模块，在 index.js 中引入。

import Vue from 'vue'
import Vuex from 'vuex'
import user from './module/user.js'
import getters from './getters'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    user
  },
  getters
})

5》使用
在组件中，可以引用 state、action 。
其中：
使用 $store.state 可以引用 state 中的数据，也可使用 mapState 替代 $store.state。
使用 $store.dispatch 可以引用 action 中的方法，也可使用 mapActions 替代$store.dispatch。

如下：
在 Header.vue 页面中，使用 mapState 引入 userName，并显示。
在 computed 中引入 state 定义的属性（可以使用数组或者对象的形式）。
由于使用了模块进行封装，所以在引入时，第一个参数需要指定模块名。

import {mapState} from 'vuex'
export default {
    computed: {
        // ...mapState('user', {userName: 'userName'}),
        ...mapState('user', ['userName'])
    }
}

6》在 Login.vue 中引入 action 方法，用于修改用户名。

import {mapActions} from 'vuex'

export default {
    data() {
        return {
            dataForm: {
                userName: '',
                password: ''
            }
        },
       
    },
 methods: {
            ...mapActions('user', ['updateName'])
       }
}

测试大功告成