Vue3使用vuex存取数据

一、引入

现在main.ts里引入

二、创建对应目录

根目录下创建store目录，在里面创建对应的getter,index文件以及modules文件夹

三、各个文件的内容

modules/user.ts 是我需要存储的数据

//导出store模块
export default {
  namespaced: true,
    state: () => ({
        token: localStorage.getItem('token') || '测试token',
        userinfo: '测试userinfo'
        // userinfo: localStorage.getItem('userinfo')||'测试userinfo'
    }),
    mutations: {
        setToken(state, token) {
            state.token = token;
            localStorage.setItem('token', token)
        },
        setUserInfo(state, userinfo) {
            state.userinfo = userinfo
            localStorage.setItem('userinfo', userinfo)
        }
    },
    actions: {}
}

.getter文件是专门用来获取数据的

export default {
    token: (state) => state.user.token,
    userinfo: (state) => state.user.userinfo
}

index.ts是引入.getter以及相关modules的内容的

import { createStore } from 'vuex'
import user from './modules/user'
import getters from './getters'
export default createStore({
    modules: {
        user
    },
    getters
})

四、调用

引入相关模块
const store = useStore()一定要写在最外面

设置数据和获取数据

感言

因为自己淋过雨，所以总想着为别人撑把伞。希望这篇文章能帮助到你。