Vue-Pinia简记

简介

Pinia是Vuex的升级版，使用比Vuex更加简单方便，同时支持Vue2.x和Vue3.x。Pinia是Vue的专属状态管理库，它允许你跨组件和页面共享状态。简单理解就是如果你有需要全组件都要共享访问和操作的数据，那么就用Pinia。

使用入门

安装包

npm install pinia

配置

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

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

以上是适用于Vue3的，如果是Vue2还需要安装一个插件，并在应用的根部注入创建的pinia：

import {defineStore} from 'pinia'

/**
 * 定义并到处容器
 * 参数1：容器的ID，必须唯一，将来Pinia会把所有的容器挂载到根容器
 * 参数2：选项对象
 * 返回值：一个函数，调用得到容器实例
 */
export const useCounterStore = defineStore('counter',{
    /**
     * 类似于组件的data，用来存储全局状态的
     * 1、必须是函数：这样是为了服务端渲染的时候避免交叉请求导致数据状态的污染
     * 2、必须是箭头函数，为了更好的TS类型推导
     */
    state:() => {
        return {
            count:0
        }
    },

    /**
     * 类似于组件的computed，用来封装计算属性，有缓存的功能
     */
    getters:{
        double:(state) => state.count * 2
    },

    /**
     * 类似于组件的methods，封装业务逻辑，修改state
     */
    actions:{
        increment(){
            this.count++
        }
    }
})

以上是展示的Option Store方式创建Store，还有一种就和setup函数类似的Setup Store创建方式：

坑点

• 不要直接解构state，因为state原理就是使用reactive进行封装，所以reactive有的缺点它也有（比如解构后失去响应性）。如果先使用解构方式访问，Pinia提供了storeToRefs()

• 不能在 actions中定义箭头函数，this的指向会混乱。
• getters和computed类似，对数据会有缓存，没有改变时多次调用都会调用缓存的数据。

使用

• state的基本使用

<script setup>
import { useCounterStore } from "../../store/index";

const mainstore = useCounterStore()


const handleChangeState = () => {
    //方式一，最简单的方式
    mainstore.count++
    //方式二，需要修改多个数据,建议使用$patch 批量更新（内部有性能优化）
    mainstore.$patch({
        count: mainstore.count + 1,
        message:'changed info',
        arr:[...mainstore.arr,66]
    })
    //方式三:$patch一个函数,更好的批量更新方式
    mainstore.$patch(state => {
        state.count++
        state.message = 'info3'
        state.arr.push(99)
    })
}
</script>

以上方法都可以放到actions中做处理，同样可以通过this.$patch的方式批量操作状态

• getters的使用

• actions的使用

类似getters，不同的是，action可以是异步的，可以在里面await调用任何API，以及其他的action。

访问其他store上的action

• 订阅Action（store.$onAction()）

可以通过store.$Action()来监听action和它们的结果。传递给它的回调函数会在action本身之前执行。
after表示在promise解决之后，允许你在action解决后执行一个回调函数。
onError允许你在action抛出错误或reject时执行一个回调函数。
这些函数对于追踪运行时错误非常有用。

const unsubscribe = someStore.$onAction(
  ({
    name, // action 名称
    store, // store 实例，类似 `someStore`
    args, // 传递给 action 的参数数组
    after, // 在 action 返回或解决后的钩子
    onError, // action 抛出或拒绝的钩子
  }) => {
    // 为这个特定的 action 调用提供一个共享变量
    const startTime = Date.now()
    // 这将在执行 "store "的 action 之前触发。
    console.log(`Start "${name}" with params [${args.join(', ')}].`)

    // 这将在 action 成功并完全运行后触发。
    // 它等待着任何返回的 promise
    after((result) => {
      console.log(
        `Finished "${name}" after ${
          Date.now() - startTime
        }ms.\nResult: ${result}.`
      )
    })

    // 如果 action 抛出或返回一个拒绝的 promise，这将触发
    onError((error) => {
      console.warn(
        `Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`
      )
    })
  }
)

// 手动删除监听器
unsubscribe()

默认情况下，action订阅器会被绑定到添加它们的组件上（如果store在组件的setup()内）。这意味着，当组件被卸载时，它们将被自动删除。如果你想在组件卸载时依旧保留它们，就将true作为第二个参数传递给action订阅器，以便将其从当前组件中分离：

<script setup>
const someStore = useSomeStore()
// 此订阅器即便在组件卸载之后仍会被保留
someStore.$onAction(callback, true)
</script>