状态管理-pinia的使用

1. pinia和vuex的区别

• pinia没有mutations，只有：state、 getters、 actions
• pinia分模块不需要modules（之前vuex分模块需要modules)
• pinia体积更小（性能更好）
• pinia可以直接修改state数据

2.安装pinia

npm i pinia

根据需要 安装pinia-plugin-persist插件，实现持久化存储

npm i pinia-plugin-persist

3.main.ts中导入

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

import { createPinia } from 'pinia' // 从pinia中导入createPinia方法
import piniaPersist from 'pinia-plugin-persist'  //导入持久化存储

const app = createApp(App)

const pinia = createPinia()
pinia.use(piniaPersist)    //使用持久化存储,不需要可不写

app.use(pinia) // 使用vue实例的use方法，告诉vue我们要使用pinia
app.mount('#app')

4.创建store

新建store文件夹，新建userInfo.ts模块文件来存放用户信息相关的数据，因为pinia中没有modules区分模块，store下的每个文件就是一个模块

创建store很简单，调用pinia中的defineStore函数即可，该函数接收两个参数：

name：一个字符串，必传项，该store的唯一id。
options：一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等。
我们可以定义任意数量的store，因为我们其实一个store就是一个函数，这也是pinia的好处之一，让我们的代码扁平化了，这和Vue3的实现思想是一样的。

import { defineStore } from 'pinia' //从pinia中导入，defineStore方法，用于定义一个新的store

// 第一个参数是应用程序中 store 的唯一 id,最好和文件名同意
export const userInfoStore = defineStore('userInfo', { // 使用defineStore方法定义store
  state:() => {                       // state表示这个store里的状态，也就是存放数据的地方
    return {
      userName: 'pinia定义的数据',       // 这里我们定义了一个数据叫userName，用于存放我们的用户名 
    }
  },
  getters: {
    double: (state) => '姓名:' + state.userName,
  },
  actions: {
    // 修稿state的值
    changeStateVal(val: any) {
      this.userName = val
    }
  },

  // 持久化存储配置
  persist: {
    enabled: true , // pinia-plugin-persist 是否开启持久化存储， 默认sessionStorage
    strategies: [{
      // key: 'userInfo',      //存储的key，默认当前store的key 
      // paths: ['userName'],   //哪个属性需要持久化存储，默认全是
      storage: localStorage    //使用localStorage存储
    }]
  }
})

5.使用store

引入使用即可，pinia中有多种方式可以修改state中的数据

<template>
  <div>
    {{ store.userName }}
    <button @click="handleUpdatePinia">修改pinia数据</button>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { storeToRefs } from "pinia";     //和vue中toRefs的作用一模一样
import { userInfoStore } from "../store/userInfo";  //直接引入store中定义的 userInfoStore
const store = userInfoStore();           // 然后实例化


const handleUpdatePinia = () => {
  // 第一种方式：直接修改
  // store.userName = 'dfads'    //直接修改pinia的数据

  // 第二种方式 通过$patch
  // 1.
  // store.$patch({
  //   userName: "被修改的值",
  // });

  // 2.
  // store.$patch((state) => {
  //   state.userName = "被修改的值";
  // });

  //第三种方式 通过actions里的方法修改
  store.changeStateVal("被修改的值"); //可以直接给actions里面的方法传递参数
};


</script>