vuex数据永久存续

第一步下载 vuex 并创建store下js文件
在这里插入图片描述

第二步 npm install vuex-persistedstate
在这里插入图片描述
第三步引用 vuex-persistedstate 配置 plugins 项

import createPersistedState from 'vuex-persistedstate'

plugins:[createPersistedState({//存储方式：localStorage\sessionStorage\cookies//local 长效存储    session短效存储，唯一tabstorage:window.sessionStorage,//存储的 key 的值key: 'store',reducer(state){  //render错误修改//要存储的数据：本项目采用es6扩展运算符的方式存储了state中所有的数据return { ...state }}})]

完整index.js 文件

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'Vue.use(Vuex)const store = new Vuex.Store({state: {count: 0,title: "我是一个标题名称",},mutations: { // 用来修改state和getters里面的数据//修改countSTORE_editSync_count(state, newObj){console.log(newObj.data)state.count = newObj.data},STORE_editAsyn_count(state, newObj){state.title = newObj.data},},getters: { // 相当于计算属性},actions: { // vuex中用于发起异步请求STORE_EDITAsyn_title({commit}, obj){commit("STORE_editAsyn_count", obj)}},modules: {// 拆分模块},plugins:[createPersistedState({//存储方式：localStorage\sessionStorage\cookies//local 长效存储    session短效存储，唯一tabstorage:window.sessionStorage,//存储的 key 的值key: 'store',reducer(state){  //render错误修改//要存储的数据：本项目采用es6扩展运算符的方式存储了state中所有的数据return { ...state }}})]})export default store