Vue：vuex状态数据持久化插件vuex-persistedstate

Vue项目使用Vuex保存全局状态。Vuex默认是存储到内存中，如果刷新浏览器状态就会重置。这就需要持久化状态数据。

不过，需要注意的是，有一些数据并不需要持久化。

文档：

1. Vue CLI
2. vuex
3. vuex-persistedstate
4. js-cookie

项目结构

# 项目结构
$ tree 
.
├── package.json
├── main.js
├── App.vue
└── store ├── cookie-storage.js ├── index.js └── persistedstate.js

# 快速原型开发
$ vue serve

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
 

代码

依赖 package.json

{
  "dependencies": { "js-cookie": "^2.2.1", "vue": "^2.6.12", "vuex": "^3.6.2", "vuex-persistedstate": "^4.0.0-beta.3"
  }
}


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

程序入口 main.js

import Vue from "vue";
import App from "./App.vue";
import store from "./store";

const app = new Vue({
  el: "#app",
  store: store,
  render: (h) => h(App),
});

export default app;


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
 

组件 App.vue

<template>
  <div class=""> <input type="text" v-model="name" >
  </div>
</template>

<script>
export default {
  name: '', computed: { name: { get() { // 取出数据 return this.$store.getters.name; }, set(val) { // 更新数据 this.$store.dispatch('setName', val); }, },
  },
};
</script>

<style lang="scss" scoped>
</style>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
 

Vuex组件入口 store/index.js

import persistedState from "./persistedstate";
import Vuex from "vuex";
import Vue from "vue";

Vue.use(Vuex);

const store = new Vuex.Store({
  // 数据状态
  state: { name: "" }, // 获取 getter
  getters: { name: (state) => { console.log("getters.name"); return state.name; },
  }, // 同步 setter
  mutations: { setName(state, name) { console.log("mutations.setName"); state.name = name; },
  }, // 异步 setter
  actions: { setName({ commit }, name) { console.log("actions.setName"); commit("setName", name); },
  }, // 持久化插件 
  plugins: [persistedState],
});

export default store;


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
 

持久化插件 store/persistedstate.js

import createPersistedState from "vuex-persistedstate";
import CookieStorage from "./cookie-storage.js";

const persistedState = createPersistedState({
  // 默认存储到localStorage
  //   storage: window.localStorage // 存储到cookie
  storage: CookieStorage,
});

export default persistedState;


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
 

自定义持久化存储 store/cookie-storage.js

import Cookies from "js-cookie";

const CookieStorage = {
  getItem: (key) => Cookies.get(key),
  setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
  removeItem: (key) => Cookies.remove(key),
};

export default CookieStorage;


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/113939702