Vue3 使用Vuex与Vuex-persistedstate

Vuex与vuex-persistedstate

Vuex是什么？

Vuex是一个用于Vue.js应用程序的状态管理模式。它使得在应用程序中的所有组件之间共享和访问状态变得非常简单。Vuex将应用程序的状态存储在一个单一的存储库中，并且提供了一组用于更改状态的API。这使得状态管理变得更加可预测和易于调试。

Vuex的几个重要属性

在Vuex中，有几个重要的属性，如下所示：

1. state：状态对象。它是Vuex存储库中的单一数据源，保存了应用程序的状态。它类似于Vue组件中的data对象，但可以被所有组件访问和修改。

2. getters：计算属性。它类似于Vue组件中的计算属性，可以从state派生出一些状态，以供组件使用。Getters也可以接受其他getters作为参数。

3. mutations：更改状态的方法。它是唯一允许修改state的方法。它们是同步的，必须是纯函数（不依赖于外部变量），以确保状态变化的可追溯性。

4. actions：异步操作。它允许在mutations之前执行异步操作，以便在修改状态之前处理数据。actions可以包含任意异步操作，如API调用、异步操作或者其他mutations的提交。

export default createStore({
  state: {
  count:0,
  },
// 调mutations的方法通过commit调用,而
  mutations: {
    add(state, num) {
      state.count = state.count+num;
    },
	 sub(state, num) {
      state.count = state.count+num;
    },
	init(state, num){
	 state.count = 0;
	}
  },
  / 和mutations不同,不用传state,可以通过上下文context,
  //这个context 可以获取整个代码文件中的属性和方法
  //调用actions的要用dispatch调用
  actions: {
   add(context,num){
   context.commit("add",num)
   }
  },
  //计算属性
  getters: {
     getCount(state){
	 return state.count
	 }
  }
})

在组件中使用

<template>
<div>
<h3>{{$store.getters.getCount}}</h3>
</div>
</template>

import { useStore } from 'vuex' // 引入useStore 方法
export default {
const store = useStore()  // 该方法用于返回store 实例
}
//调用mutations中的方法
store.commit("add",1)
//调用actions中的方法
store.dispatch("add",2)

modules

5. modules：模块化Vuex存储。当一个应用程序变得非常大并且具有复杂的状态时，可以使用modules将其拆分为更小的、更易于管理的模块。每个模块都可以具有自己的state、getters、mutations和actions，可以嵌套到多个级别。
   默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的，这样使得多个模块能够对同一 mutation 或 action作出响应。如果希望你的模块具有更高的封装度和复用性，此时就用到了命名空间这个概念，
   启用命名空间后，该模块中的所有 action、mutation 和 getter 都会自动带上模块的命名空间前缀。这样可以避免不同模块中的命名冲突，同时也使得代码更加清晰
   可以在单个模块中通过添加namespaced：true的方式使其成为带命名空间的模块。

export default {
  namespaced: true, // 为每个模块添加一个前缀名，保证模块命明不冲突 
  state: {
  count:0,
  },
  mutations: {
  },
  actions: {

  },
  getters: {
  }
}

通过 store/index.js 中进行引入

import { createStore } from 'vuex'
import user from './modules/user.js'
import test from './modules/test.js'
export default createStore({
  modules: {
    user,
    test
  }
})

组件中使用

//需要在模块名前加上命名空间前缀
store.commit('test/add', 1)
//如果没有启用命名空间，则不需要加上前缀
store.commit('add', 1)

Vuex-persistedstate 是什么？

Vuex-persistedstate是一个Vue.js插件，它可以将Vuex存储在浏览器的本地存储中，以便在刷新页面后保留应用程序的状态。它使用了一些现代浏览器提供的本地存储API，如localStorage或sessionStorage，以实现这一目标。

安装Vuex-persistedstate

npm install vuex-persistedstate --save

使用Vuex-persistedstate

import { createStore } from 'vuex'
import user from './modules/user.js'
import test from './modules/test.js'
//等等.......
import createPersistedState from 'vuex-persistedstate'//在 Vuex 的 store 中引入 vuex-persistedstate
export default createStore({
  modules: {
    user,
    test,
  },
    plugins: [
    // 数据持久化
    createPersistedstate({
	// 存储方式：localStorage、sessionStorage、cookies
       storage: window.sessionStorage
	   //key值
      key: 'keyName',
	  //需要持久化存储模块的状态
      paths: ['user']
    })]
})