状态管理：vuex（适用于vue2）

1. Vuex的五个核心概念：state、getters、mutations、actions、modules。

2. 名词解释：

• state：状态数据（各种数据变量）
• getters：对状态数据经过一些处理后，生成的数据（变量）
• mutations：同步方法，可用来修改state值。注：方法名常一律都用大写字母表示, 如：SET_NAME(state, payLoad) {...}
• actions:  异步方法，如通过ajax异步请求后端获取一些数据，然后交给mutations去修改state。
• modules: 模块化vuex，每一个模块都拥有自己独立的 state、mutation、action、 getters，使得结构非常清晰，方便管理。注：调用时，常用斜杠/符号, 如：模块名/xxx

一、安装对应库

安装vuex库： npm i vuex

二、store状态管理文件

store/modules/app.js文件

import Cookies from 'js-cookie'
const state = {
  sidebar: {
    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
    withoutAnimation: false
  },
  device: 'desktop',
}

const mutations = {
  OPEN_SIDEBAR: (state) => {
    Cookies.set('sidebarStatus', 1)
    state.sidebar.opened = true
  },
  CLOSE_SIDEBAR: (state, withoutAnimation) => {
    Cookies.set('sidebarStatus', 0)
    state.sidebar.opened = false
    state.sidebar.withoutAnimation = withoutAnimation
  },
  TOGGLE_DEVICE: (state, device) => {
    state.device = device
  },
}

const actions = {
  closeSideBar({ commit }, { withoutAnimation }) {
    commit('CLOSE_SIDEBAR', withoutAnimation)
  },
  toggleDevice({ commit }, device) {
    commit('TOGGLE_DEVICE', device)
  },
}

export default {
  namespaced: true, // 模块化
  state,
  mutations,
  actions
}

store/getters.js文件

// 把不同模块的都汇总
const getters = {
  sidebar: state => state.app.sidebar, // app模块
  device: state => state.app.device,
  token: state => state.user.token, // user模块
  avatar: state => state.user.avatar,
  name: state => state.user.name,
  introduction: state => state.user.introduction,
}
export default getters

store/index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

// 将不同模块的状态管理汇总
// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules,
  getters
})

export default store

三、数据持久化处理（解决：刷新浏览器后，vuex数据消失问题）

工具库：js-cookie、

四、.vue页面：使用状态管理

1. 状态管理：分模块和不分模块，分模块需要使用斜杠/符号来标志（模块名/xxx）。

2. 使用方式（2种）：

方式1:  使用vuex库内置的4个mapXX函数，来解构vuex对象

方式2: 使用this.$store.xxx方式（即：将store注册到vue的）。

<template>
    <div>
        某个模块的getter数据：{{ $store.gerters.模块名.数据项名 }}
        state数据：{{ this.$store.state.count }}
        使用计算属性：{{ sidebar }}{{ showSettings }}
    </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions, mapState } from 'vuex'
export default {
  // 方式1：通过vuex内置的4个mapXXX方法使用
  computed: {
    ...mapGetters(['permission_routes','sidebar','headerTab']),
    ...mapState({
      device: state => state.app.device,
      showSettings: state => state.settings.showSettings,
    }),
    // 是否折叠，isCollapse：true为折叠，否为展开
    isCollapse() {
      return !this.sidebar.opened // 使用状态管理中的getters数据，直接: this.xxx
    }
  },
  methods: {
    ...mapMutations(['form/SET_POPPER_OBJ']), // [模块名/方法名]
    ...mapActions(["handleAdd","handleDelete"]) // [方法名]
    handleDeleteShow() {
      const name = 'xxx'
      // 使用mutations方法（form模块的SET_POPPER_OBJ方法）
      this['form/SET_POPPER_OBJ'](name) 
    },

   // 方式2: 通过this.$store.xxx方式使用状态管理
   handleTest() {
     const sidebar = this.$store.getters.sidebar // 使用getters数据
     const city_no = this.$store.state.user.city_no // 使用state数据（user模块）
     await this.$store.dispatch("user/logout", 传参) // 调用异步的actions方法
     this.$store.commit('SET_AUTH_TYPE', 传参) // 调用同步的mutations方法
   }
 }
}
</script>

参考链接：

• vuex的五种属性及使用方法 - 掘金