vue3中使用pinia,以及持久化pinia的pinia-plugin-persistedstate ，亲测有效果

推荐版本组合

npm install pinia@2.1.7 vue@3.2.45

注意事项 ：

• Node.js版本需≥16.0
• 需配合Vue3.2+版本使用

 

安装pinia 和 pinia-plugin-persistedstate

npm i pinia pinia-plugin-persistedstate -S    

state ====state

computed===getters

function ====actions

 

使用步骤

目录结构（模块化）

store/index.js

import {createPinia} from "pinia"

const pinia =createPinia();

//引入pinia的数据持久化插件
import persist from 'pinia-plugin-persistedstate'

pinia.use(persist)

export default pinia;

export * from "./modules/user.js" //简化版的导出

 

store/modules/user.js

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


export const useUser = defineStore("user",

() => {
    let userInfo = ref({
        name: "犬夜叉",
        category: "犬类",
        gender: "雄性",
        age: 20,
        coutry: "战国",
        girlfriend: "日暮戈薇",
        exGirlfriend: "桔梗",
        friends: ['弥勒法师', "珊瑚", "云母", "七宝"]
    })
    const afterTenYears = computed(() => userInfo.value.age + 10)


    const changeUsername = (name) => {
        userInfo.value.name = name
    }
    const handleIncreaseAge = () => {
        userInfo.value.age++;
    }
    const resetInfo = () => {
        userInfo.value = {
            name: "犬夜叉",
            category: "犬类",
            gender: "雄性",
            age: 20,
            coutry: "战国",
            girlfriend: "日暮戈薇",
            exGirlfriend: "桔梗",
            friends: ['弥勒法师', "珊瑚", "云母", "七宝"]
        }
    }




    return {
        afterTenYears,
        userInfo,
        changeUsername,
        handleIncreaseAge,
        resetInfo
    }
},

{
    //是否开启数据持久化
    persist: true,//只写这个属性就可以了，然后所有定义的state和computed都可以保存信息,下面可省略
    persist: {
        key: 'user', //存储的key
        storage: localStorage, //存储的仓库
    }
})

main.js

import App from './App.vue'
const app = createApp(App)


import pinia from "@/store/index.js"
app.use(pinia)
app.mount('#app')

 

 

index.vue  （注意storeToRefs()方法，是让state和getters中的数据仍保持响应状态。）

<template>
  <div>
    <h2>用户信息</h2>
    <p>姓名: {{ userInfo.name }}</p>
    <p>性别: {{ userInfo.gender }}</p>
    <p>国籍: {{ userInfo.coutry }}</p>
    <p>年龄: {{ userInfo.age }}</p>
    <p>女朋友: {{ userInfo.girlfriend }}</p>
    <p>前女友: {{ userInfo.exGirlfriend }}</p>
    <p>朋友:<ul>
        <li v-for="(item,index) in userInfo.friends" :key="index">{{ item }}</li>
    </ul></p>
    <p>十年之后：{{ afterTenYears }}</p>


    <button class="primary" @click="handleChangeName">修改名字</button> &nbsp;
    <button class="primary" @click="userStore.handleIncreaseAge">修改年龄</button>&nbsp;
    <button class="primary" @click="userStore.resetInfo">重置信息</button>&nbsp;
  </div>
</template>



<script setup>



import { useUserStore } from "@/store/index.js";
import { storeToRefs } from "pinia";
const userStore = useUserStore();
const { userInfo,afterTenYears } = storeToRefs(userStore);



const handleChangeName=()=>{
    userStore.changeUsername('犬大将')
}



</script>



<style scoped>
</style>