Vuex与vuex-persistedstate
Vuex是什么？
Vuex是一个用于Vue.js应用程序的状态管理模式。它使得在应用程序中的所有组件之间共享和访问状态变得非常简单。Vuex将应用程序的状态存储在一个单一的存储库中，并且提供了一组用于更改状态的API。这使得状态管理变得更加可预测和易于调试。
Vuex的几个重要属性
在Vuex中，有几个重要的属性，如下所示：
-
state：状态对象。它是Vuex存储库中的单一数据源，保存了应用程序的状态。它类似于Vue组件中的data对象，但可以被所有组件访问和修改。
-
getters：计算属性。它类似于Vue组件中的计算属性，可以从state派生出一些状态，以供组件使用。Getters也可以接受其他getters作为参数。
-
mutations：更改状态的方法。它是唯一允许修改state的方法。它们是同步的，必须是纯函数（不依赖于外部变量），以确保状态变化的可追溯性。
-
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
- 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']
})]
})