vue 3.0 vuex 的使用笔记

对于网页中如何做到数据持久化之前一直是一个问号今天终于搞清楚了这个问题特此记录一下

数据持久化需要用到的插件 vuex vuex-persistedstate

• 先导入这个两个插件

npm install vuex
npm i  vuex-persistedstate

导入完成之后在src 目录下新建 store 文件夹

• 在 store 文件夹下 分别新建 index.js 文件 和models 文件夹 在models 中主要存放对应需要存储数据的模块 这里我新建的cart.js 文件
• 首先在cart.js 中 定义需要存储的参数

export default {
    nameSpaced: true,
    state() {
        return {
            info: {
                account: "",
                token: "",
                name: "",
                phone: "",
                nickName: "",
                ids: ""
            }
        }
    },
    mutations: {
        // 登录状态
        loginWithInfo(state, params) {
            state.info = params;
        },
        //退出登录
        clearUserInfo(state, params) {
            state.info.account = '';
            state.info.token = ''
            state.info.name = ''
            state.info.phone = ''
            state.info.nickName = ''
            state.info.ids = ''
        },

        // 测试修改用户名
        changeUserName(state, infos) {
            console.log('开始修改' + infos)
            state.info.name = infos
        }
    }
}

• 用户信息的东西就是这些

在index.js 文件夹下导入cart 文件

import { createStore } from 'vuex'
import createPersistedState from "vuex-persistedstate";

// 用户信息管理类
import carts from './models/cart'

const dataState = createPersistedState({
    key: "localUser-info",
    // 每次新增加需要本地缓存的文件需要在这里注册 否则在外部不会生效
    path: [ carts]
});
export default createStore({
    modules: {
        carts
    },
    // 默认存储在 localStorage 中
    plugins: [dataState]
})

在组建中使用 存储单元

// 引入存储单元
import {useStore} from 'vuex'  /// 这里需要注意 别写成createStore了 
import {goLoginAction} from '@/api'
// 在模板中定义显示和修改事件
<div>关于我们</div>
<div v-if="users.name.length == 0">请先登录</div>
<div v-else>{{users.name}}</div>
<button @click="test">测试修改</button>
<button @click="login">点击登录</button>
<button @click="logout">退出登录</button>

 setup() {

        // 引入 存储管理类 
        const store = useStore()
        
        const users = computed(()=> {
            return store.state.carts.info
        })
        const test = ()=> {
            store.commit("changeUserName","")
        }
        const login = ()=> {
            // 点击登录
            // const params = {"phone":"13027703035","auth_code":"4780"}
            goLoginAction().then((res)=>{
                console.log('请求成功====' + res.code)
            }).catch((error)=> {
                console.log('请求失败====' + error)
            })
            const params = {"account":"* 海贼王 *","name":"呵呵哒","phone":"13039399999","nickName":"蒙奇 * D * 路飞"}
            store.commit('loginWithInfo',params)
        }
        const logout = ()=> {
            store.commit("clearUserInfo")
        }
        return {
            users,
            test,
            login,
            logout
        }
    }

到这 最基本的数据修改和读取就实现完成了

• 当前这知识最基本的数据存储方式 如果有大佬有更好的数据存储方式 还请不吝赐教。。。。