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 explanation of Svn one-click installation shell script under linxu

#!/bin/bash #Download SVN yum -y install subversi...

Talk about the 8 user instincts behind user experience in design

Editor's note: This article is contributed by...

JS realizes the scrolling effect of announcement online

This article shares the specific code of JS to ac...

Recommend several MySQL related tools

Preface: With the continuous development of Inter...

Hbase Getting Started

1. HBase Overview 1.1 What is HBase HBase is a No...

Teach you how to use docker-maven-plugin to automate deployment

1. Introduction to docker-maven-plugin In our con...

Detailed explanation of nginx configuration file interpretation

The nginx configuration file is mainly divided in...

Solve the problem of VScode configuration remote debugging Linux program

Let's take a look at the problem of VScode re...

Detailed tutorial on installing Python 3 virtual environment in Ubuntu 20.04

The following are all performed on my virtual mac...

Example code of the spread operator and its application in JavaScript

The spread operator allows an expression to be ex...

Vue routing lazy loading details

Table of contents 1. What is lazy loading of rout...

Detailed explanation of scheduled tasks and delayed tasks under Linux

at at + time at 17:23 at> touch /mnt/file{1..9...