vue3 使用vuex以及数据持久化

发布时间 2023-08-23 13:05:44作者: -莫可可
/*
 * @Author: Caixia.Gao
 * @LastEditors: Caixia.Gao
 * @Date: 2023-08-23 11:28:44
 * @LastEditTime: 2023-08-23 11:45:05
 * @Description: 
 */
// 引入vuex
import {
    createStore
} from 'vuex';

// 引入持久化
import createPersistedState from 'vuex-persistedstate';

import allCase from './user.js'
const store = createStore({

    // 定义数据
    state: {

        info: '',
        count:0

    },

    //同步方法
    mutations: {

        updateInfo(state, payload) {

            state.info = payload;

        },
        saveCount(state,payload){
            debugger
            state.count = payload
        }
    },

    //异步方法
    actions: {

        updateInfoSaync(context, payload) {

            //               同步方法      内容
            context.commit('updateInfo', payload);

        }
    },

    //计算属性
    getters: {},

    //模块
    modules: {
        allCase
    },

    //持久化数据
    plugins: [

        createPersistedState({

            key: 'vuex', // 存储是的名字

            // 也可以是sessionstorage

            storage: window.localStorage

        })
    ]

})

export default store

转载:https://blog.csdn.net/YWW_ABC/article/details/123551816