vue3里本地存储——pinia方法

在项目里，我们有时候会需要存储token，用户名，密码这些，pinia就是比较方便的一个方法。

1.首先，我们得安装 pinia 和安装 persist

npm install pinia

npm install pinia-persistedstate-plugin

2. 第二步，就需要在 main.js 里进行一个全局引用了

import { createPinia } from 'pinia'
import { createPersistedState } from 'pinia-persistedstate-plugin'


const pinia = createPinia()
const persist = createPersistedState()
pinia.use(persist)

app.use(pinia)

3.创建一个 store.js 文件 （我这边就储存token,password,username为例，我写在一个文件里了，到时候方便引用）

import { defineStore } from "pinia";
import { ref } from "vue";

export const useStore = defineStore('store', () => {//store是一个ID标识

    //token
    const token = ref('');

    const setToken = (newToken) => {
        token.value = newToken;
    }

    const removeToken = () => {
        token.value = ''
    }

    //username
    const username = ref('');

    const setUsername = (newUsername) => {
        username.value = newUsername;
    }

    const removeUsername = () => {
        username.value = ''
    }


    //password
    const password = ref('');

    const setPassword = (newPassword) => {
        password.value = newPassword;
    }

    const removePassword = () => {
        password.value = ''
    }


    return {
        token, setToken, removeToken, username, setUsername, removeUsername, password, setPassword, removePassword
    }
}, {
    persist: true //持久化存储(为了刷新页面，存储值不消失)
});

persist: true 是因为pinia自身有一个bug，如果不引用它，在刷新页面的时候，本地存储也随之消失，所以不能忽略，一开始安装 persist 也是这个目的

4.最后一步就是写入存储值了，一般我们是在登录页面写入

import { useStore} from '@/store/store';

const store = useStore();

.....

//当登录成功进行跳转时
store.setToken("23456");//这个是我写的一个定值，到时候根据input获取来
store.setUsername("admin")
store.setPassword("password")

......

ps 如何查看呢，我们可以在登录后的一个页面进行测试 test.vue

import { useStore} from '@/store/store';

const store = useStore();
console.log(store.username,store.password,store.token)//admin,password,23456

我们也可以在网页的本地存储里查看

这样本地存储就可以了！