vuex优劣势

vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。
vuex劣势：在F5刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。
为了克服这个问题， vuex-persistedstate出现了~~
原理：
将vuex的state存在localStorage或sessionStorage或cookie中一份
刷新页面的一瞬间，vuex数据消失，vuex回去sessionStorage中哪会数据，变相的实现了数据刷新不丢失~

vuex基本对象

vuex中，有默认的五种基本的对象：
1.state：存储状态（变量）
2.getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()3.mutations：修改状态，并且是同步的。在组件中使用$store.commit(‘fun()’,params)。这个和我们组件中的自定义事件类似。
4.actions：异步操作。在组件中使用是$store.dispath(‘fun()’,params)
5.modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。

操作步骤

1.安装vuex依赖和vuex-persistedstate依赖
npm install vuex -s (状态管理)
npm install vuex-persistedstate -d （将vuex数据存储到localStorage）
2.新建src/store/index.js和src/store/modules/temp.js

3.src/store/index.js中引用vuex和vuex-persistedstate及创建vuex并暴露

import Vue from 'vue'
import Vuex from 'vuex'
import temp from '@/store/modules/temp'
import createPersistedSatte from 'vuex-persistedstate'

Vue.use( Vuex );

const store = new Vuex.Store({
    modules: {
        temp,
    }, state: {

    }, getters: {

    }, mutations: {

    },
    plugins: [createPersistedSatte()]
});

export default store

4.src/store/modules/temp.js用state定义数据和封装方法并暴露

const tempInfo = {
// state定义数据相当于实力中的data
    state: {
        tempData: {},
        message:"程女士"
    },
    mutations: {
        SET_TEMP_DATA(state, tempData) {
            state.tempData = tempData
        },
        SELF(state, tempData) {
            state.message = tempData
        }
    },
    actions: {
        SetData({ commit }, tempData) {
            commit('SET_TEMP_DATA', tempData);
        },
        SetMassage({ commit }, tempData) {
            commit('SELF', tempData);
        }
    },
    getters: {
        tempData: (state) => {
            return state.tempData
        },
        messages:(state) => {
            return state.message
        }
    }
}

export default tempInfo

5.在想使用的.vue单文件中使用

<template>
  <div>
 // getters获取并渲染
    {{this.$store.getters.messages}}
  //dispatch操作数据
    <button @click="change">改变</button>
  </div>
</template>

<script>
export default {
  methods:{
    change(){
    // 点击按钮让程女士变成封先生，此时刷新页面依然是封先生，存储在localStorage必须手动清除。
      this.$store.dispatch('SetMassage','封先生')
      console.log(this.$store.getters.message)
    }
  }
}
</script>

再来看之前的temp.js中的函数名，在新页面获取和修改中所使用。


vue页面刷新丢失数据问题（存储在sessionStorage）：
参考链接：https://segmentfault.com/a/1190000020078777#articleHeader5