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

Example code for implementing raindrop animation effect with CSS

Glass Windows What we are going to achieve today ...

How to use Nexus to add jar packages to private servers

Why do we need to build a nexus private server? T...

A complete guide to some uncommon but useful CSS attribute operations

1. Custom text selection ::selection { background...

How to align text boxes in multiple forms in HTML

The form code is as shown in the figure. The styl...

MySQL should never write update statements like this

Table of contents Preface cause Phenomenon why? A...

Implementation of k8s node rejoining the master cluster

1. Delete node Execute kubectl delete node node01...

JDBC Exploration SQLException Analysis

1. Overview of SQLException When an error occurs ...

CSS3 achieves infinite scrolling/carousel effect of list

Effect Preview Ideas Scroll the current list to t...

Solution to the conflict between Linux kernel and SVN versions

Phenomenon The system could compile the Linux sys...

The pitfall of MySQL numeric type auto-increment

When designing table structures, numeric types ar...

Detailed explanation of the use of the <meta> tag in HTML

In the web pages we make, if we want more people ...

How to use default values ​​for variables in SASS

Variables defined in SASS, the value set later wi...

Query the data of the day before the current time interval in MySQL

1. Background In actual projects, we will encount...

Several methods of implementing two fixed columns and one adaptive column in CSS

This article introduces several methods of implem...