Vue3中pinia的使用

我正在参加「掘金·启航计划」

1、pinia基本使用

1.1、安装pinia

yarn add pinia
#或者使用 npm
npm install pinia

1.2、在main.js文件里面进行配置

import { createPinia } from 'pinia'

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

1.3、创建stores文件夹

在stores文件夹下新建index.js（这个文件以后基本不用管了）

import { createPinia } from "pinia"; 
const pinia = createPinia() 
export default pinia

在stores文件夹下创建counter.js文件。

//定义关于counter的store
import {defineStore} from 'pinia'

/*defineStore 是需要传参数的，其中第一个参数是id，就是一个唯一的值，
简单点说就可以理解成是一个命名空间.
第二个参数就是一个对象，里面有三个模块需要处理，第一个是 state，
第二个是 getters，第三个是 actions。
*/
const useCounter = defineStore("counter",{
    state:() => ({
        count:66,
    }),
    getters: {
    },
    actions: {
    }
})

//暴露这个useCounter模块
export default useCounter

1.4、组件中使用

<template>
    <!-- 在页面中直接使用就可以了 不用 .state-->
    <div>展示pinia的counter的count值：{{counterStore.count}}</div>
</template>

<script setup>
// 首先需要引入一下我们刚刚创建的store
import useCounter from '../stores/counter'
// 因为是个方法，所以我们得调用一下
const counterStore = useCounter()
</script>

2、修改state的方式

// 1.直接修改
store.token = "123";
 
// 2.通过$patch修改
store.$patch((state) => {
  state.current = "111";
});
 
// 3.调用acticons里的方法修改
store.setCurrent();

pinia 解构不具有响应式，但是可以使用storeToRefs 来让解构的state具有响应式

import {storeToRefs} from 'pinia'
const counterStore = useCounter()

const {count} = storeToRefs(counterStore)

$reset()函数是重置state数据的

function resetStore(){
    userStore.$reset()
}

3、数据的持久化

3.1、安装 pinia-plugin-persistedstate

npm i pinia-plugin-persist

3.2、安装完成后 需要在main.js文件内进行配置

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

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

3.3、在store里面添加配置选项

export const useUserStore = defineStore({
  state () {
    return {
      count: 0,
      num: 101,
    }
  },
  persist: {
    enabled: true, // 开启缓存  默认会存储在本地localstorage
    storage: sessionStorage, // 缓存使用方式
    paths:[] // 需要缓存键  //默认会保存当前模块全部数据
  }
})