vue3引入pinia

pinia和vuex都是用来存储共享数据的，pinia在vuex的基础上进行了调整，删除了mutations属性，更改state里的数据值变得更简单

1.创建store文件夹，包含index.js引入pinia，其他的是单独的storeModule

2.在index.js中添加

//1.下载：npm i pinia
//3.main.js文件里引入import pinia from './store'; app.use(pinia)
//2.新建store文件夹，内置index.js文件，代码如下

//有需要继续：
//4.安装持久化插件：npm i pinia-plugin-persistedstate
//5.把插件添加到pinia实例上

import { createPinia } from "pinia";
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia

3.定义storeModule

import { defineStore } from "pinia";

//useUserInfoStore是一个被reactive包裹的对象
const useUserInfoStore = defineStore(
    //modelStore的name,也称id，具有唯一性
    'userInfo',
    //拥有和vuex一样的属性state、getters和actions，少了mutations
    {
        //等同于vue组件中的data部分
        state: () => {
            return {
                username: '张三',
                phone: '110',
                age: 10,
                hobby: [
                    { id: 1, name: '篮球' },
                    { id: 2, name: '钢琴' }
                ]
            }
        },
        //等同于vue组件中的计算属性部分
        getters: {
            doubleAge(state) {
                return state.age * 2
            },
            //可以通过返回一个函数允许使用时传递参数
            filterHobby(state) {
                return function (filterText) {
                    return state.hobby.filter(v => v.name.includes(filterText))
                }
            }
        },
        //等同于vue组件中的method部分
        actions: {

        },
        //引入持久化插件后可配置persist属性，使用方法如下：
        //（1）直接设置为true,整个store都将使用默认持久化配置存储
        //     默认持久化配置：用localStorage存储，store的name作为key,JSON.stringfy(state)作为value；使用时用JSON.parse()反序列化
        // persist: true
        //（2）自定义配置
        //     三个常用属性：1.key:存储名称；2.storage:存储方式；3.pick:指定需要被持久化存储的数据，[]表明不持久化任何数据，undefined和null表明持久化整个state
        persist: {
            key: 'userInfo',
            storage: sessionStorage,
            pick: ['username', 'hobby']
        }
    }
)

export default useUserInfoStore

4.在main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import pinia from './store'

const app = createApp(App)

app.use(pinia)

app.mount('#app')

5.在vue组件中使用

<template>
  <div>{{ store.username }}</div>
  <div>{{ store.phone }}</div>
  <div>{{ store.age }}</div>
  <div>{{ store.doubleAge }}</div>
  <div>{{ store.filterHobby('球') }}</div>
</template>

<script setup>
import useUserInfoStore from '@/store/user.js'

const store = useUserInfoStore()
console.log(JSON.parse(sessionStorage.userInfo));

//获取：store.age
//修改：
//(1)直接修改
store.age += 10
//(2)多个属性用$patch同时修改
store.$patch({
  username: '李四',
  phone: '119'
})
//(3)恢复定义时的初始值用$reset()方法
store.$reset()


</script>