vue中配置vuex状态管理

前言

1. 文档：https://www.cnblogs.com/Zbaozi/p/10135719.html
2. 文档：https://www.cnblogs.com/yhquan/p/10369140.html
3. 文档：https://blog.csdn.net/qq_41772754/article/details/88074103这个比较详细

使用方式

1. 第一步-创建store-test.js

// 第一步：引入Vue、和Vuex(固定写法)
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

// 第二步：声明Vuex 的五个属性，其中state, mutations 是一定要定义的，其他的三个属性对象根据实际需要。
const state = {  // 初始化状态值--一定要有该属性对象    
    MenuSwitchState: true,
    StudNum: 3
}
const mutations = {  // 自定义改变state初始值的方法--一定要有该属性对象
}
const getters = {  // 状态计算属性--该属性对象不是必须的 
}
const actions = { // 异步操作状态--该属性对象不是必须的
}
const modules = {  // 状态模块--该属性对象不是必须的
}

// 第三步：创建一个 store 实例，将声明的五个变量赋值赋值给 store 实例，如下：
const StoreTest = new Vuex.Store({
    state,
    mutations,
    //下面三个非必须
    getters,
    actions,
    modules
})
// 第四步：导出 store 实例，供外部访问
export default StoreTest

2. 第二步- 在main.js引入

import store from './store/store-test'
// 实例化vue对象
let myVue = new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
})

3. 第三步-在页面使用

• 直接获取state参数
  this.$store.state.StudNum
• 通过get获取：
  略（因为我还没写到，所以待补充）
• 通过action设置参数
  略（因为我还没写到，所以待补充）