Vuex 持久化新手入门简介

最新推荐文章于 2024-08-12 22:28:07 发布

瞿云天

最新推荐文章于 2024-08-12 22:28:07 发布

阅读量82

点赞数

分类专栏： vuex 文章标签： javascript 前端开发语言 vue

本文链接：https://blog.csdn.net/neusoft_hao/article/details/129990678

版权

vuex 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue.js应用中实现数据持久化，通过引入vuex-persistedstate插件，设置简单的配置，将Vuex状态存储到浏览器的sessionStorage中，以便在页面刷新后仍能保留用户数据。

摘要由CSDN通过智能技术生成

持久化通俗的讲就是刷新界面，数据给它保留一下。
1.自己手写前端缓存
2.通过插件，这个比较方便，vuex-persistedstate 或 vuex-persist
安装一下 npm install --save vuex-persistedstate ，至于用法，自己找下文档，配置下就几个参数
下面用个简单通俗易懂示例介绍一下



import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate";
const moduleStoreCart = {
    state:{
        cart:0,
        cartEnglish:10,
        cartExpire:1
    },
    mutations:{
        carAdd(state,data){
            state.cart +=  data.count
        }
    },
    getters:{
        cartExpire:(state)=>{
            return function(data){
                return  state.cartExpire+data
            }
        },
        cartAll:(state,getters)=>{
            console.log(getters);
            return state.cart + state.cartEnglish
        }
    },
    actions:{
        apiUpdate(context){
            return  new Promise((resolve, reject) => {
                let status = 0;
                context.commit("carAdd",{count:1})
                if(status){
                    reject() //成功
                }else{
                    resolve()  //失败
                }
            })
        }
    }
}


const moduleStoreUser = {
    state:{
        user:{token:"666",id:"123"}
    },
    mutations:{

    },
    getters:{

    },
    actions:{

    }
}


const store = new Vuex.Store({
    state:{
        public:{
            data:"公共"
        }
    },
    mutations:{

    },
    getters:{

    },
    actions:{

    },
    modules:{
        cart:moduleStoreCart,
        user:moduleStoreUser
    },
    plugins: [
        createPersistedState({
            // 存储方式：localStorage、sessionStorage、cookies
            storage: window.sessionStorage,
            // 存储的 key 的key值
            key: "store",
            render(state) {
            // 要存储的数据：本项目采用es6扩展运算符的方式存储了state中所有的数据
                return { ...state };
            }
        })
    ]
})


export  default store;