vue3中使用vuex以及vuex的数据持久化_vuex持久化存储插件 - vuex-persist vue3中使用

新建store文件夹下的index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
 
 
const store = new Vuex.Store({
    state: {
        condtions: {
            keyword: "",
            shijian: "",
            type: "",
            filetype: "",
            ztType: "",
            tsType: "",
            gkYear: ""
        },
        num:10,
        sum:10,
        str:"这是store的数据"
    },
    getters:{
        total(state){
            retrun state.num + state.sum
        }
    },
    mutations: {
        changeNum(state, val) {
            state.num= val
        },
    },
    actions: {
        changeNum2(state, val) {
            state.num= val
        },
    }
})
export default store

在setup中使用

import { useStore } from 'vuex'

let store =useStore( )
 

state：let num = computed(()=> store.state.num)
getters：let total = computed(()=> store.getters.total)

mutations：store.commit('changeNum',10)

actions：store.dispatch('changeNum2',10)

models：

vueX持久化存储【插件】

1. npm i vuex-persistedstate -S
2. import persistedstate from ‘vuex-persistedstate’
3. export default createStpre({

        models:{user}，

        plugins:[

                persistedstate({

                        key:"xiaoluxian",

                        paths:['user]

                })

        ]

})