Detailed explanation of vuex persistence in practical application of vue

Detailed explanation of vuex persistence in practical application of vue

vuex persistence

vuex: Refresh the browser, the state in vuex will return to the initial state

Solution:

Use the vuex-persistedstate plugin (which actually exists automatically in local storage)

  • Install npm i -S vuex-persistedstate
  • Import and configuration: in index.js under store
import Vue from 'vue'
import Vuex from 'vuex'
//Introduce import persistedState from 'vuex-persistedstate'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    num: null,
    name: null
  },
  mutations:
    getNum(state, val) {
      state.num = val
    },
    getName(state, val) {
      state.name = val
    }
  },
  //Configure plugins: [
    persistedState({
    	//By default, localStorage is used to solidify data. SessionStorage can also be used. The configuration is the same: storage: window.localStorage,
      reducer(val) {
        return {
        // Only store the value num in state: val.num,
          name: val.name
        }
      }
    })
  ]
})

I assign values ​​to variables in the state of vuex in the Home component

created(){
    this.$store.commit('getNum',3)
    this.$store.commit('getName','胡歌')
  },

Reference in H component

<template>
  <div>
      {{$store.state.num}}
      {{$store.state.name}}
  </div>
</template>

In this way, when refreshing the H component, the variables in $store.state will not change. In fact, they are automatically stored in the local storage.

insert image description here

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:
  • How to implement data persistence using the vuex third-party package
  • Two implementation solutions for vuex data persistence
  • Ideas and codes for implementing Vuex data persistence
  • VUEX data persistence, example of re-acquisition after refresh
  • Vuex implements data state persistence
  • How to implement a simple vuex persistence tool

<<:  How to use CSS to pull down a small image to view a large image and information

>>:  The leftmost matching principle of MySQL database index

Recommend

Detailed installation and configuration tutorial of mysql5.7 on CentOS

Install Make sure your user has permission to ins...

This article will show you how JavaScript garbage collection works

Table of contents 1. Overview 2. Memory Managemen...

Vue image cropping component example code

Example: tip: This component is based on vue-crop...

Implementation of CSS scroll bar style settings

webkit scrollbar style reset 1. The scrollbar con...

Detailed explanation of the watch listener example in vue3.0

Table of contents Preface The difference between ...

How to configure Nginx virtual host in CentOS 7.3

Experimental environment A minimally installed Ce...

Vue.js implements timeline function

This article shares the specific code of Vue.js t...

Linux dual network card binding script method example

In Linux operation and configuration work, dual n...

What does the n after int(n) in MySQL mean?

You may already know that the length 1 of int(1) ...

A brief introduction to Tomcat's overall structure

Tomcat is widely known as a web container. It has...

CSS3 realizes the graphic falling animation effect

See the effect first Implementation Code <div ...

Use and optimization of MySQL COUNT function

Table of contents What does the COUNT function do...

Node.js implements breakpoint resume

Table of contents Solution Analysis slice Resume ...