How to use vuex combined with localstorage to dynamically monitor storage changes

This time I will show you how to use vuex combined with localstorage to dynamically monitor storage changes, and how to use vuex combined with localstorage to dynamically monitor storage changes. What are the precautions?The following is a practical case, let's take a look.

Requirements: Different components share the same data. When one component changes the data, other components can also respond to the change.

Analysis: vue cannot monitor localstorage changes. Localstorage is mainly used to transfer values ​​between different pages, while vue is suitable for transferring values ​​between components. For components that share the same data and want to save the information or not lose the data when the page is refreshed (the value stored by vuex will be lost when the page is refreshed, and localstorage is stored in the local browser), you can use vuex localstorage.

About the difference between vuex and storage

1. The most important difference: vuex is stored in memory, while localstorage is stored locally in the form of files

2. Application scenarios: vuex is used to transfer values ​​between components, while localstorage is mainly used to transfer values ​​between different pages.

3. Permanence: The value stored by vuex will be lost when the page is refreshed, but localstorage will not.

Note: Many students think that localstorage can be used instead of vuex. It is indeed possible for immutable data, but when two components share a data source (object or array), if one of them When a component changes the data source and wants another component to respond to the change, localstorage cannot do it. The reason is difference 1.

About vuex reference document: http://vuex.vuejs.org/zh-cn/index.html

Implementation process: display user avatar information on the homepage, modify personal information in public components Take the header component as an example. When the user modifies personal information, the picture on the homepage changes in real time. If the avatar information is not stored and updated, the user will only be able to see the changes after each modification by refreshing the page or returning from other pages, that is, the newly set Avatar information, showing only the core code.

1. First define a variable in state. State is responsible for storing the state data of the entire application. You can use this.$store.state to directly obtain the state later. You can also use the mapState auxiliary function provided by vuex to map state to calculated properties.

const state = {
 imgInfo:null //首页头像信息
}

2.mutations store localstorage information. Mutations can change the state, which is essentially a function used to process data, which receives the unique parameter value state. The defined mutation must be a synchronous function. this.$store.commit(mutationName) is a method used to trigger a mutation, or use the auxiliary function mapMutations to directly map the trigger function to methods, so that it can be used directly on element event binding .

export const SETIMGINFO = 'SETIMGINFO'
[SETIMGINFO] (state,info) {
 state.imgInfo=info
 localStorage.setItem('imgInfo',info)
 }

3. Get the localstorage information in the getter. Some states require secondary processing, so you can use getters. Access the derived state through this.$store.getters.valueName. Or directly use the auxiliary function mapGetters to map it to local calculated properties.

getImgInfo(state){
  if(localStorage.getItem('imgInfo')){
  state.imgInfo=localStorage.getItem('imgInfo')
  }
  return state.imgInfo
 }

4. Reference mapMutations function on the page that needs to operate on storage

import {mapMutations} from 'vuex' //引入mapMutations
 ...mapMutations([      
  'SETIMGINFO'
  ]),
this.SETIMGINFO(this.imgInfo) 
 //在需要的地方引用 mutations里面定义的方法

5. Reference the mapGetters auxiliary function on the page that needs to obtain storage information

import {mapGetters} from 'vuex'
computed:{
  ...mapGetters([   
  'getImgInfo'
  ])
 },
watch:{ //动态监听state的变化，实时改变页面的数据
  getImgInfo: function(li) { //li就是改变后的state里面的imgInfo
  let vm = this;
   this.imgInfo=li //data声明一个变量，在html引用。如果storage的值发生变化就实时刷新变量的值。
  }
 },

6. Reference to the value of vuex in the template

<img  src="/static/imghwm/default1.png" data-src="imgInfo?imgInfo:info.avatar" class="lazy" alt="How to use vuex combined with localstorage to dynamically monitor storage changes" > 
//三元不等式，如果state发生变化有值就赋值给img标签，如果没有即刚进页面就赋值给create生命周期函数中从接口读出来的数据

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the steps to implement snowflake falling animation in JS

How to use Vue canvas to implement the mobile handwriting pad function

The above is the detailed content of How to use vuex combined with localstorage to dynamically monitor storage changes. For more information, please follow other related articles on the PHP Chinese website!