vue3如何使用vuex以及如何持久化存储

Vuex 将所有组件的共享状态集中到一个单独的 state 对象中，并提供了一系列的 API 来修改状态，使得状态管理变得简单而可预测。

第一步安装vuex

npm install vuex@next

第二步创建store.js文件

import { createStore } from 'vuex';

const store = createStore({
  state: {
    // 添加您的全局状态变量
    info: '',
    name:'',
    user:'',
    pid:0,
    //班级信息跳转
    classList:'',
    classid:1,
    Activated_state:0
  },
  mutations: {
    // / 添加您的全局状态更新方法
    updateInfo(state, payload) {
      state.info = payload
    },
    updatename(state, payload) {
      state.name = payload
    },
    updateuser(state, payload) {
      state.user = payload
    },
    updatepid(state, payload) {
      state.pid = payload
    },
    updateActivated_state(state, payload){
      state.Activated_state=payload
    },
    over(state){
      state.info = '',
      state.name = '',
      state.user = '',
      state.pid=0
    },
    //班级管理
    classList(state, payload) {
      state.classList=payload.classList,
      state.classid=payload.classid
    },
  },
  actions: {
    // 添加您的异步操作和其他处理方法
    // 2秒后更新状态
    updateInfo(context, payload) {
      context.commit('updateInfo', payload)
    },
    updatename(context, payload) {
      context.commit('updatename', payload)
    },
    updateuser(context, payload) {
      context.commit('updateuser', payload)
    },
    updatepid(context, payload) {
      context.commit('updatepid', payload)
    },
    updateover(context, payload) {
      context.commit('over')
    },
    //查看权限
    updateActivated_state(context, payload) {
      context.commit('updateActivated_state', payload)
    },
    //班级管理
    updateclassList(context, payload) {
      context.commit('classList',payload)
    },

  },
  getters: {
    // 添加您的子模块（如果有）
    formatInfo(state) {
      // return state.info + ' Tom'
    }
  },
  modules: {
  },

});

export default store;

举例修改state.info的值通过mutations mutations： 的左边是 state 对象，表示要操作的状态对象；右边是 payload，表示要对状态做出的修改操作，即一个函数，接收 state 作为第一个参数，payload 作为第二个参数，通过调用这个函数可以改变 state 的值。例如： actions ：的左边是一个上下文对象 context，包含了一些有用的属性和方法，比如 commit、dispatch 等；右边也是 payload，表示要传递给 action 的参数。在 actions 中，可以通过 commit 来触发 mutations 中的函数来修改 state 的值，也可以通过 dispatch 来触发其他的 actions。

第三部在main中引用

通过红色箭头完成引用

第四步在组件中TS或JS分别的引用方法

1.在js中引用修改info状态 修改state.info状态

this.$store.dispatch('updateInfo', res.data.data[0].Organization_No)

2.获取info值的方法

//方法一
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      info: state => state.info
    })
  },
  mounted() {
    // 在组件中访问 state 中的属性
    console.log(this.info) 
  }
}
//方法二
console.log(this.$store.state.info) //需要注意的你也可以通过这种方法直接修改他值但不是响应式的

3.在ts中获取值以及修改方法 先导入vuex模块

import { useStore } from 'vuex'
const store=useStore()
//然后通过store.state获取值
console.log(store.state.info)
//修改值方法
store.dispatch('updateInfo',row.Class_No)

如何一次性修改多个参数

在store中文件中添加方法

state: {
    //班级信息跳转
    classList:'',
    classid:1

  },
  mutations: {
    //班级管理
    classList(state, payload) {
      state.classList=payload.classList,
      state.classid=payload.classid
    },
  },
  actions: {
    //班级管理
    updateclassList(context, payload) {
      context.commit('classList',payload)
    },

  },

在ts中分别传值就可以修改成果了

store.dispatch('updateclassList',{classList:row.Class_No,classid:0})

如何浏览器存储中持久化存储 plugins: [createPersistedState()] 是使用 vuex-persistedstate 插件实现持久化存储 Vuex 状态的配置。

Vuex 状态默认情况下是存储在内存中的，当页面刷新或关闭时，状态会被重置。但是，在某些场景下需要让状态保持持久化，比如用户登录状态、购物车内容等。在这种情况下，我们就可以使用 vuex-persistedstate 插件将状态持久化到浏览器本地存储中，以实现状态的长期保存。

1.安装 vuex-persistedstate 可以通过 npm 安装：

npm install vuex-persistedstate

2.修改store文件代码如下 添加

import createPersistedState from "vuex-persistedstate";//导入库
plugins: [createPersistedState()]//添加方法

import { createStore } from 'vuex';
import createPersistedState from "vuex-persistedstate";
const store = createStore({
  state: {
    // 添加您的全局状态变量
    info: '',
    //班级信息跳转
    classList:'',
    classid:1

  },
  mutations: {
    // / 添加您的全局状态更新方法
    updateInfo(state, payload) {
      state.info = payload
    },
    //班级管理
    classList(state, payload) {
      state.classList=payload.classList,
      state.classid=payload.classid
    },
  },
  actions: {
    // 添加您的异步操作和其他处理方法
    // 2秒后更新状态
    updateInfo(context, payload) {
      context.commit('updateInfo', payload)
    },
    //班级管理
    updateclassList(context, payload) {
      context.commit('classList',payload)
    },

  },
  getters: {
    // 添加您的子模块（如果有）
    formatInfo(state) {
      // return state.info + ' Tom'
    }
  },
  modules: {
  },
  plugins: [createPersistedState()]
});

export default store;