vuex 刷新数据消失处理 调用实例

修改应用数据不刷新问题

 
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
 
export default new Vuex.Store({
     state: {
        obj: {
            a:1,
        }, 
        arr: [0,1,2]
    },
    mutations: {
        SET_STATE_DATA(state){
            // state.obj.b= '233'; // 错误 页面不会更新 
            // JSON.parse(JSON.stringify(state.obj) //不推荐此方法触发更新 显得很LOWB
            Vue.set(state.obj,'b','233') // 正确的方法
 
            // state.arr[0] = 233; // 错误 页面不会更新
            // state.arr.push() //不推荐此方法触发更新
            Vue.set(state.arr,0,233) // 正确的方法
        }
    },
    actions: {
        
    }
})

vuex 调用vue实例

	const that = this
    this.$store.dispatch('getAddress', that)
  

async getAddress({ commit, state }, that) {
        const url = `position/${state.latitude},${state.longitude}`
        const { data: res } = await that.$http.get(url)
        if (res.code === 0) {
            commit(RECEIVE_ADDRESS, { address: res.data })
        }
    }

1.vuex组件 vuex-persistedstate
参考:添加链接描述

npm install vuex-persistedstate --save

import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
  state,
  mutations,
  getters,
  plugins: [createPersistedState()]
})

在我们的localstorage中就会看到有一个vuex的key，值为{“showLogin”:false,“navIndex”:true,“token”:“64c9bbf8541b47af8d891b20247ae6a3”,“nickName”:“百宝箱”,“updataCart”:false,“showLoading”:false}的字符串的JSON数据

每次我们更新vuex的状态，localstorage中的vuex也会随之改变

createPersistedState([options])
使用给定的选项创建插件的新实例。可以提供以下选项来配置您的特定需求的插件：

key ：存储持久状态的键。（默认：vuex）

paths ：部分持续状态的任何路径的数组。如果没有路径给出，完整的状态是持久的。（默认：[]）

reducer ：一个函数，将被调用来减少基于给定的路径持久化的状态。默认包含这些值。

subscriber ：一个被调用来设置突变订阅的函数。默认为store => handler => store.subscribe(handler)

storage ：而不是（或与）getState和setState。默认为localStorage。

getState ：将被调用以重新水化先前持久状态的函数。默认使用storage。

setState ：将被调用来保持给定状态的函数。默认使用storage。

filter ：将被调用来过滤将setState最终触发存储的任何突变的函数。默认为() => true

自定义存储
如果在本地存储中存储Vuex存储的状态并不理想。人们可以轻松地实现功能使用cookie（或任何其他你可以想到的）;

import { Store } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

const store = new Store({
  // ...
  plugins: [
    createPersistedState({
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]
})

实际上，可以传递任何遵循存储协议（getItem，setItem，removeItem等）的对象：

// 用sessionStorage替换localStorage
createPersistedState({ storage: window.sessionStorage })

转载:https://developer.aliyun.com/article/620010

2. app.vue

   if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign({}, JSON.parse(sessionStorage.getItem("store")||'{}'))
      );
       sessionStorage.removeItem("store")
    }

    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });

3.将每一次state的数据保存起来
转载:https://cloud.tencent.com/developer/article/1397383

const storeMaker = (state) => {
    // 初始化
    Object.keys(state).map((key) => {
        // 判断类型获取本地存储数据
        if (typeof state[key] === 'object') {
            if (sessionStorage.getItem(key) && JSON.parse(sessionStorage.getItem(key))) {
                state[key] = JSON.parse(sessionStorage.getItem(key))
            }
        } else if (typeof state[key] === 'number') {
            if (sessionStorage.getItem(key) && parseInt(sessionStorage.getItem(key))) {
                state[key] = parseInt(sessionStorage.getItem(key))
            }
        } else {
            if (sessionStorage.getItem(key)) {
                state[key] = sessionStorage.getItem(key)
            }
        }
    })

    // 重写set处理
    return new Proxy(state, {
        set: function(target, key, value) {
            let temp = value
            if (typeof temp === 'object') {
                temp = JSON.stringify(temp)
            }

            sessionStorage.setItem(key, temp)
            return Reflect.set(target, key, value)
        }
    })
}

export default new Vuex.Store({
    state: storeMaker({
        userLevel: ''
    }),
    mutations: {
        SET_USERLEVEL(state, userLevel) {
            state.userLevel = userLevel
        }
    },
    modules: {
    }
})

4.个人认为 第二种和第三种结合,效果更佳,因为一些登录凭证放在 本地存储里是不安全的的 因此放在内存中最好,但是刷新导致内存初始化,因此在刷新时 需要本地缓存过去一下 再删除

5.还可以在 mutations action 等方法里处理缓存数据 过滤/增加缓存数据 如果操作了就缓存 没有操作就就是默认值

const mutations = { //触发状态
  //取出缓存数据
  setCacheData(state) {
    for (var name of cacheNameList) {
      var data = sessionStorage.getItem(name) || localStorage.getItem(name);
      if (data) {
        var dataObj = JSON.parse(data);
        state[name] = dataObj;
      }
    }
  },
 }