Vue3 中使用pinia和pinia持久化

 Pinia本质上依然是一个全局状态管理的库，用于跨组件、页面进行状态共享（这点和Vuex、Redux、Mobx一样）。

1.首先，本地要下载并配置好node

2.创建文件假，并用vscode打开

3.创建vue3项目

npm init vue@latest

项目名称：vue3demo1

进入到项目目录中：

命令行：

cd vue3demo1

下载配置环境：

命令行：

npm i

安装pinia-plugin-persistedstate

命令行：

npm i pinia-plugin-persistedstate

运行命令行：

npm run dev

main.js文件修改：

修改前：

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

 修改后：

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' //引入持久化插件

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia().use(piniaPluginPersistedstate))
app.use(router)

app.mount('#app')

4.自定义store

src/stores/userstore.js:

没有持久化之前写法：

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useStore = defineStore('userStore', () => {
    const token = ref(null)
    
    // 赋值token-(普通函数)
    function setToken(val){
        token.value = val;
    }
    // 获取token-(箭头函数)
    const getToken = () =>{
        return token.value;
    }
  
    return { token, setToken, getToken }
  })
  

持久化写法： 

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useStore = defineStore('userStore', () => {
    const token = ref(null)
    const user = ref({
        name:null,
        age:null
    })
    
    // 赋值token-(普通函数)
    function setToken(val){
        token.value = val;
    }
    // 获取token-(箭头函数)
    const getToken = () =>{
        return token.value;
    }

    // 设置用户信息
    const setUserInfo = (obj) => {
        user.value.name = obj.name;
        user.value.age = obj.age;
    }

    // 获取用户信息
    const getUserInfo = () =>{
        return user;
    }
  
    return { token, setToken, getToken,user,setUserInfo,getUserInfo }

  },{
    persist:true// 持久化全部
    // 参数持久化
    /*persist:{
        key: 'testStore', //存储名称
        storage: sessionStorage, // 存储方式 - sessionStorage、localStorage
        //指定哪些数据需要被持久化。
        //pick: ['token','user.name'],

        //[] 表示不持久化任何状态
        //pick:[],

        //undefined 或 null 表示持久化全部数据
        //pick:null
  }*/

})
  

5、使用方法

AboutView.vue:

<template>
  <div class="about">
    <h1>token值：{{ store.token }}</h1>
    <button @click="setMethod">设置token</button>
    <button @click="getMethod">获取token</button>
    <button @click="setUser">设置用户信息</button>
    <button @click="getUser">获取用户信息</button>
    <div>---------------</div>
    <h1>用户姓名：{{ store.user.name }}</h1>
    <h1>用户年龄：{{ store.user.age }}</h1>
  </div>
</template>
<script setup>
import {useStore} from '@/stores/usersotre'

const store = useStore();

// 设置方法-普通方法
function setMethod(){
  store.setToken("1111")
}


// 获取方法-箭头函数
const getMethod = () =>{
 console.log("store.getToken()", store.getToken())
}


// 设置用户信息
const setUser = () =>{
  store.setUserInfo({name:'zgy',age:38})
}

// 获取用户信息
const getUser = () =>{
  console.log("store.getUserInfo()",store.getUserInfo())
}


</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    align-items: center;
  }
}
</style>