【vue3之Pinia：状态管理工具】

一、认识Pinia

Pinia 是 Vue 的最新 状态管理工具 ，是 Vuex 的 替代品
优点：

1. 提供更加简单的API （去掉了 mutation ）
2. 提供符合，组合式风格的API （和 Vue3 新语法统一）
3. 去掉了 modules 的概念，每一个 store 都是一个独立的模块
4. 配合 TypeScript 更加友好，提供可靠的类型推断
   注：在Pinia中，省去了mutations和modules两个核心概念，actions里能直接同步或者异步修改state里的值

二、使用Pinia

链接: pinia官网
安装：npm install pinia

导入：

import './assets/main.css'
import {createPinia} from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'
const pinia=createPinia()

const app=createApp(App)
app.use(pinia).mount('#app')

三、定义store

1. 定义store
2. 组件使用store

来自vue3官网:
在store.js文件夹下定义

选择组合式API的方式定义属性和方法：

四、gettters

Getter 完全等同于 store 的 state 的计算值。

然后再return一下douleCount就可以在组件中使用了:

  return {
    count,
    doubleCount,
  }

五、Action

action相当于组件中的 method。

1.定义普通函数

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

export const useUserStore=defineStore('counter',()=>{
  const father=ref('王建国')
  const son=ref('王坚强')
  const grandSon=ref('王健康')
  const changeName=((name)=>{
    grandSon.value=name
  })
  return{
    father,
    son,
    grandSon,
    changeName,
  }
})

2.异步实现

export const useChannelStore = defineStore('channel', () => {
  // 声明数据
  const channelList = ref([])

  // 声明操作数据的方法
  const getList = async () => {
    // 支持异步
    const { data: { data }} = await axios.get('http://geek.itheima.net/v1_0/channels')
    channelList.value = data.channels
  }

  // 声明getters相关
  return {
    channelList,
    getList
  }
})

六、storeToRefs工具函数

当你从 Vuex 或其他状态管理库中获取数据时，通常会遇到解构对象属性后失去响应式的问题。这是因为解构会破坏对象的响应式性质。

在 Vue 3 中，可以通过使用 toRefs 函数来解决这个问题。toRefs 可以将包含响应式数据的对象转换为普通对象，但保留其属性的响应式性。
方法是一个固定的函数，我们不用去更改方法，顶多调用，所以不需要用storeToRefs

七、pinia持久化插件

官方文档：link

1. 安装插件

pinia-plugin-persistedstate npm i pinia-plugin-persistedstate

2. main.js 使用

import persist from 'pinia-plugin-persistedstate' ... app.use(createPinia().use(persist))

3. 开启

store仓库中的第三个配置项中，persist: true 开启

4.其他配置

详情请见官方文档


演示:

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

// 定义store
// defineStore(仓库的唯一标识, () => { ... })
export const useCounterStore = defineStore('counter', () => {
  // 声明数据 state - count
  const count = ref(100)

  // 声明操作数据的方法 action (普通函数)
  const addCount = () => count.value++
  const subCount = () => count.value--

  // 声明基于数据派生的计算属性 getters (computed)
  const double = computed(() => count.value * 2)

  // 声明数据 state - msg
  const msg = ref('hello pinia')
  return {
    count,
    double,
    addCount,
    subCount,

    msg,
  }
}, {
  // persist: true // 开启当前模块的持久化
  persist: {
    key: 'hm-counter', // 修改本地存储的唯一标识
    paths: ['count'] // 存储的是哪些数据
  }
})

//main.js
import './assets/main.css'
import {createPinia} from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia=createPinia()

const app=createApp(App)
app.use(pinia)
pinia.use(piniaPluginPersistedstate)
app.mount('#app')

注：一定要先use再mount，顺序搞反了插件弄出来没效果