Vuex combines localstorage to dynamically monitor storage changes

This article mainly introduces the detailed explanation of vuex combined with localstorage to dynamically monitor storage changes. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and 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 unchanged data, but when two components share a data source (object or array), if one of the components changes the data source , when you want another component to respond to the change, localstorage cannot do it, the reason is difference 1.

Implementation process: Take the home page to display user avatar information and modify personal information in the public component header component as an example. When the user modifies personal information, the picture on the home page changes in real time. If the avatar information is not stored and updated, every After the user has made the modification, he or she can see the changes only by refreshing the page or returning from other pages, that is, the newly set avatar information, and only the core code is displayed.

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 in 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 the 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 where storage information needs to be obtained

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 vuex value in the template

<img :src="imgInfo?imgInfo:info.avatar"> 
//三元不等式，如果state发生变化有值就赋值给img标签，如果没有即刚进页面就赋值给create生命周期函数中从接口读出来的数据

Related recommendations:

How to implement query dynamic parameter passing in vue-router

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