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初始值的方法--一定要有该属性对象
   	SET_STUDNUM(state, param){
   		state.studNum = param
   	}
   }
   const getters = {  // 状态计算属性--该属性对象不是必须的 
   }
   const actions = { // 异步操作状态--该属性对象不是必须的
   	setStudNum({ commit }, param) {
         commit('SET_STUDNUM', param)
       }
   }
   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获取：
  略（因为我还没写到，所以待补充，不过可以直接使用上一步的这个来获取：this.$store.state.studNum）
• 通过action设置参数
  上面的setStudNum方法就是设置的示例，然后是调用：
  首先，在调用的页面引用vuex
  
  然后，在methods下面添加需要调用的方法
  
  最后，直接通过this.setStudNum(来调用即可，括号里面放入需要的参数)