Eleven, Vuex uses localStorage, mapState and keep-alive

The city of the default homepage is Shanghai. For example, when you want to search Guilin, when the user switches, the page will still change to Shanghai again. Here you need a cache to store it locally and save the data after the user switches.

Use localstorage to remember user choices (caching)

localStorage is used to save the data of the entire website for a long time. The saved data has no expiration time until it is manually deleted.
localStorage is not readable in the privacy mode of the browser.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)


export default new Vuex.Store({
    
    
  state: {
    
    
    city: localStorage.city || '上海'
  },
  mutations: {
    
    
    changeCity (state, city) {
    
    
      state.city = city
      // 当用户去改变城市时，不但把state里的city改了
      // 同时还要去存一个localStorage
      localStorage.city = city
    }
  }
})

只要使用localStorage建议在外层包裹一层try catch，防止用户关闭了本地存储或使用隐身模式，浏览器抛出异常

index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 防止用户关闭了本地存储或使用隐身模式
let defaultCity = '上海'
try {
    
    
  if (localStorage.city) {
    
    
    defaultCity = localStorage.city
  }
} catch (error) {
    
    
  
}

export default new Vuex.Store({
    
    
  state: {
    
    
    city: defaultCity
  },
  mutations: {
    
    
    changeCity (state, city) {
    
    
      state.city = city
      // 当用户去改变城市时，不但把state里的city改了
      // 同时还要去存一个localStorage
      try {
    
    
        localStorage.city = city
      } catch (e) {
    
    
        
      }
      
    }
  }
})

Divide the original index.js into three parts

Use of mapState (commonly used)

mapState function: can assist in obtaining the value of multiple states

How to use it?

1. Introduced in the header.vue component, introduced in the js block

import {
    
     mapState } from 'vuex'

2. Define an object in the header.vue component

computed：{
    
    
...mapState([        //展开运算符  mapState本是一个函数，在里面写一个数组，记得加...
'city'， //存的数据
])
}

3. Then you can directly interpolate without this.$store.state.city reference{ {this.city}}

After optimization:

Use keep-alive to optimize web page performance

Every time a route is switched, ajax will be sent, so keep-alive needs to be used to optimize web page performance.

Sometimes we don't want the component to be re-rendered to affect the user experience; or for performance considerations, avoid repeated rendering to reduce performance. It is hoped that the components can be cached to maintain the current state. At this time, keep-alive components are needed.

But when switching between different cities, there is no need to cache. Need to be used in home.vue 钩子函数activated.

When the component is re-rendered again, the hook function activated determines whether the final city is the same as the city in the cache, and initiates an Ajax request again.

Keep-alive life cycle

1. When you first enter: created> mounted> activated; deactivated is triggered after exit
2. Re-enter: activated will be triggered; event mounting methods, etc., are only executed once and placed in mounted; the method executed every time the component enters is placed in activated