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

About dynamically adding routes based on user permissions in Vue

Display different menu pages according to the use...

HTML small tag usage tips

Phrase elements such as <em></em> can ...

A brief discussion on the issue of element dragging and sorting in table

Recently, when using element table, I often encou...

How to use vw+rem for mobile layout

Are you still using rem flexible layout? Does it ...

MySQL DATE_ADD and ADDDATE functions add a specified time interval to a date

MySQL DATE_ADD(date,INTERVAL expr type) and ADDDA...

How to display div on object without being blocked by object animation

Today I made a menu button. When you move the mous...

Detailed explanation of common methods of Vue development

Table of contents $nextTick() $forceUpdate() $set...

Analysis of Alibaba Cloud CentOS7 server nginx configuration and FAQs

Preface: This article refers to jackyzm's blo...

Notes on using the blockquote tag

<br />Semanticization cannot be explained in...

JS uses clip-path to implement dynamic area clipping function

background Today, I was browsing CodePen and saw ...

Website construction experience summary

<br />What principles should be followed to ...

Linux CentOS6.5 yum install mysql5.6

This article shares the simple process of install...

Introduction to nesting rules of html tags

There are many XHTML tags: div, ul, li, dl, dt, d...