10. pinia的基本使用

pinia的基本使用

vue3中，官方推荐使用pinia代替vuex，你可以理解成pinia是vuex的升级版。pinia抛弃了vuex的mutations概念，只保留了state、getter、action

使用步骤

1、安装

npm i pinia -S

2、在main.js中注册

import { createApp } from 'vue'
import { createPinia } from 'pinia' // 1.导入
import App from './App.vue'

const app = createApp(App)
app.use(createPinia()) // 2.使用
app.mount('#app')

3、在src的根目录下创建一个store的文件夹，然后新建一个user.js文件。并写上以下代码 ：

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

// 使用defineStore函数创建store，这里的userId必须是唯一的，不能重复。相当于vuex的namespace
export const useUserStore = defineStore('userId', () => {
    
    // 相当于vuex的state
    const info = ref({
        name: 'tom',
        age: 10
    })
    const flag = ref(false)
    
    // 相当于vuex的getter
    const getAge = computed(() => {
        return info.value.age
    })
    
    // 相当于vuex的action，同步和异步都这样写
    const setAge = (age) => {
        info.value.age = age;
    }

    return {
        info,
        getAge,
        setAge
    }
})

4、使用

<template>
  <div>
    <p>{{ userStore.flag }}</p>
    <p>{{ userStore.info.name }}</p>
    <p @click="userStore.setAge(20)">{{ userStore.getAge }}</p>
  </div>
</template>
<script setup>
import { useUserStore } from './store/user' // 1. 导入

const userStore = useUserStore(); // 2. 调用函数
</script>

storeToRefs

上面的例子，在模板上展示数据和调用方法多需要userStore.xxx比较麻烦。你可以使用storeToRefs结构出来

修改上面的例子

<template>
  <div>
    <p>{{ flag }}</p>
    <p>{{ info.name }}</p>
    <p @click="setAge(20)">{{ getAge }}</p>
  </div>
</template>
<script setup>
import { storeToRefs } from "pinia"
import { useUserStore } from './store/user'

const userStore = useUserStore()
const { flag, info, getAge } = storeToRefs(userStore) // 必须使用storeToRefs函数结构出来，不然会丢失响应式
const { setAge } = userStore; // 函数直接结构出来即可
</script>

持久化

推荐使用pinia-plugin-persistedstate这个插件做持久化。

1、插件安装

npm i pinia-plugin-persistedstate -S

2、在main.js中注册

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import persist from 'pinia-plugin-persistedstate' // 1.导入


const app = createApp(App)


const pinia = createPinia(); // 2. 创建


pinia.use(persist) // 3. use

app.use(pinia)

app.mount('#app')

3、在store文件夹中创建一个js文件，写入以下内容 ：

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

export const useUserStore = defineStore('numberManager', () => {

    const number1 = ref(0);
    const number2 = ref({
        n: 0
    })

    const setNumber = (val) => {
        number1.value += val;
        number2.value.n += val * 2;
    }

    return {
        number1,
        number2,
        setNumber
    }
}, {
    persist: true // 在defineStore的第三个函数中设置persist为true，则代表缓存所有数据（数据指的是number1、number2）
})

4、使用

<template>
  <div>
    <p @click="tempStore.setNumber(1)">
      {{ tempStore.number1 }}
      <br/>
      {{ tempStore.number2.n }}
    </p>
  </div>
</template>
<script setup>
import { useUserStore } from './store/user'

const tempStore = useUserStore();
</script>

当执行点击后，打开浏览器的Application，可以看到，该插件默认是把我们的数据存储到localStorage

其它配置

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

export const useUserStore = defineStore('numberManager', () => {

    const number1 = ref(0);
    const number2 = ref({
        n: 0
    })

    const setNumber = (val) => {
        number1.value += val;
        number2.value.n += val * 2;
    }

    return {
        number1,
        number2,
        setNumber
    }
}, {
    persist: {
        key: 'mynumber', // 修改localStorage存储的key名
        paths: ['number1', 'number2.n'], // 要缓存的数据
        storage: sessionStorage // 存储数据的方式，只能是localStorage或者sessionStorage
    }
})