Vue: vuex persistent state

Peng Shiyu 2021-02-23 02:21:08
vue vuex persistent state


Vue Project use Vuex Save global state .Vuex By default, it is stored in memory , If you refresh the browser state, it will reset . This requires persistent state data .

however , It should be noted that , There are some data that don't need persistence .

file :

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

Project structure

# Project structure 
$ tree
.
├── package.json
├── main.js
├── App.vue
└── store
├── cookie-storage.js
├── index.js
└── persistedstate.js
# Rapid prototyping 
$ vue serve

Code

rely on package.json

{

"dependencies": {

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

Program entrance 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;

Components App.vue

<template>
<div class="">
<input
type="text"
v-model="name"
>
</div>
</template>
<script>
export default {

name: '',
computed: {

name: {

get() {

// Take out the data 
return this.$store.getters.name;
},
set(val) {

// Update data 
this.$store.dispatch('setName', val);
},
},
},
};
</script>
<style lang="scss" scoped>
</style>

Vuex Component entrance store/index.js

import persistedState from "./persistedstate";
import Vuex from "vuex";
import Vue from "vue";
Vue.use(Vuex);
const store = new Vuex.Store({

// Data status 
state: {
 name: "" },
// obtain getter
getters: {

name: (state) => {

console.log("getters.name");
return state.name;
},
},
// Sync setter
mutations: {

setName(state, name) {

console.log("mutations.setName");
state.name = name;
},
},
// asynchronous setter
actions: {

setName({
 commit }, name) {

console.log("actions.setName");
commit("setName", name);
},
},
// Persistence plug-in 
plugins: [persistedState],
});
export default store;

Persistence plug-in store/persistedstate.js

import createPersistedState from "vuex-persistedstate";
import CookieStorage from "./cookie-storage.js";
const persistedState = createPersistedState({

// Default store to localStorage
// storage: window.localStorage
// Store in cookie
storage: CookieStorage,
});
export default persistedState;

Custom persistent storage 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;
版权声明
本文为[Peng Shiyu]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/02/20210222221614009r.html

  1. vue判断elementui中el-form是否更新变化,变化就提示是否保存,没变就直接离开
  2. 算法题:两数之和——JavaScript及Java实现
  3. 高性能 Nginx HTTPS 调优
  4. Why Vue uses asynchronous rendering
  5. day 31 jQuery进阶
  6. day 30 jQuery
  7. CSS whimsy -- using background to create all kinds of wonderful backgrounds
  8. Why are more and more people learning front end?
  9. What do you do with 4K front-end development?
  10. 8 years of front-end development knowledge precipitation (do not know how many words, keep writing it...)
  11. What is the annual salary of a good web front end?
  12. Front end novice tutorial! How to get started with web front end
  13. Will the front end have a future?
  14. Is the front end hard to learn?
  15. Seven new Vue combat skills to improve efficiency in 2021!
  16. Is front end learning difficult?
  17. How about the process of Web front-end development and self-study?
  18. Front end learning route from zero basis to proficient
  19. What is the basis of learning front end?
  20. What knowledge points need to be learned for self-study front end? How long can I become a front-end Engineer?
  21. An inexperienced front-end engineer, what are the common problems when writing CSS?
  22. HttpServletRequest get URL (parameter, path, port number, protocol, etc.) details
  23. Springboot starts http2
  24. Enabling http2.0 in spring boot
  25. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
  26. Using JavaScript in Safari browser history.back () the page will not refresh after returning to the previous page
  27. vue.js Error in win10 NPM install
  28. In less than two months, musk made more than $1 billion, more than Tesla's annual profit
  29. Springboot starts http2
  30. Vue event bus
  31. JQuery easy UI tutorial: custom data grid Pagination
  32. Using okhttp and okhttpgo to obtain onenet cloud platform data
  33. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control
  34. HTTP 1. X learning notes: an authoritative guide to Web Performance
  35. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control
  36. HTTP 1. X learning notes: an authoritative guide to Web Performance
  37. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
  38. Event bubble and capture in JavaScript
  39. The root element is missing solution
  40. Event bubble and capture in JavaScript
  41. Configure the certificate to enable ngnix to publish the trusted website of HTTPS
  42. Javascript数据类型
  43. HTTP interface debugging tool! 48000 star HTTP command line client!
  44. Parameter encryption of front end URL link band
  45. HTTP interface debugging tool! 48000 star HTTP command line client!
  46. Three front end frameworks: data binding and data flow
  47. Reading Axios source code (1) -- exploring the realization of basic ability
  48. Event bubble and capture in JavaScript
  49. 【微前端】微前端最終章-qiankun指南以及微前端整體探索
  50. R & D solution e-Car front end monitoring system
  51. [JS] 877 - 35 wonderful knowledge of JavaScript, long experience!
  52. R & D solution e-Car front end monitoring system
  53. High performance nginx HTTPS tuning - how to speed up HTTPS by 30%
  54. 解决ajax跨域问题【5种解决方案】
  55. Top ten classic sorting of JavaScript
  56. HTTP 1. X learning notes: an authoritative guide to Web Performance
  57. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control component
  58. My http / 1.1 is so slow!
  59. Why Vue uses asynchronous rendering
  60. The response status was 0. Check out the W3C XMLHttpRequest Level 2 spec for