vue中新的状态管理器-pinia

精选原创

阿里CTO 2023-04-01 12:05:31 ©著作权

©著作权归作者所有：来自51CTO博客作者阿里CTO的原创作品，请联系作者获取转载授权，否则将追究法律责任

背景

对于pinia的使用，可参考官方文档在这不做过多赘述。这边主要来讲讲pinia中少用且好用的方法，为什么我们选择pinia而不用vuex
ps: 以下写法全部基于组合式API

使用方式：

先下载依赖

npm i pinia -s

在vue3中，main.js这么写

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')

ps:就别考虑v2了吧，v2老老实实用vuex。

为什么选择pinia而抛弃vuex？

先看看chatGpt的回答🐶

vue中新的状态管理器-pinia_API

but 这说了和没说一样

官方回答：

与 Vuex 相比，Pinia 不仅提供了一个更简单的 API，也提供了符合组合式 API 风格的 API，最重要的是，搭配 TypeScript 一起使用时有非常可靠的类型推断支持。

mutation 已被弃用。它们经常被认为是极其冗余的。它们初衷是带来 devtools 的集成方案，但这已不再是一个问题了。
无需要创建自定义的复杂包装器来支持 TypeScript，一切都可标注类型，API 的设计方式是尽可能地利用 TS 类型推理。
无过多的魔法字符串注入，只需要导入函数并调用它们，然后享受自动补全的乐趣就好。
无需要动态添加 Store，它们默认都是动态的，甚至你可能都不会注意到这点。注意，你仍然可以在任何时候手动使用一个 Store 来注册它，但因为它是自动的，所以你不需要担心它。
不再有嵌套结构的模块。你仍然可以通过导入和使用另一个 Store 来隐含地嵌套 stores 空间。虽然 Pinia 从设计上提供的是一个扁平的结构，但仍然能够在 Store 之间进行交叉组合。你甚至可以让 Stores 有循环依赖关系。
不再有可命名的模块。考虑到 Store 的扁平架构，Store 的命名取决于它们的定义方式，你甚至可以说所有 Store 都应该命名。

State

1、如何修改State

在传统的vuex中我们是不建议直接修改state的，而是建议我们通过mutation来修改state，但是在pinia中我们可以直接修改state。例如：

const store = useStore()

store.count++

如果我们需要在同一时间变更多个属性,可以通过$patch方法，例如：

store.$patch((state) => {
  state.items.push({ name: 'shoes', quantity: 1 })
  state.hasChanged = true
})

2、如何订阅State

用来监听state是否发生变化，与watch相比，使用 $subscribe() 的好处是 subscriptions 在 patch 后只触发一次。例如

cartStore.$subscribe((mutation, state) => {
  // import { MutationType } from 'pinia'
  mutation.type // 'direct' | 'patch object' | 'patch function'
  // 和 cartStore.$id 一样
  mutation.storeId // 'cart'
  // 只有 mutation.type === 'patch object'的情况下才可用
  mutation.payload // 传递给 cartStore.$patch() 的补丁对象。

  // 每当状态发生变化时，将整个 state 持久化到本地存储。
  localStorage.setItem('cart', JSON.stringify(state))
})

在组合式API中可以这么使用：

<script setup>
const someStore = useSomeStore()
// this subscription will be kept even after the component is unmounted
someStore.$subscribe(callback, { detached: true })
</script>

Getter

1、如何访问其他store 的 getter

想要使用另一个 store 的 getter 的话，那就直接在 getter 内使用就好，例如：

import { useOtherStore } from './other-store'

export const useStore = defineStore('main', {
  state: () => ({
    // ...
  }),
  getters: {
    otherGetter(state) {
      const otherStore = useOtherStore()
      return state.localData + otherStore.data //otherStore.data 就是其他getter中的getter
    },
  },
})

2、如何像getter中传递参数

Getter 只是幕后的计算属性，所以不可以向它们传递任何参数。不过，你可以从 getter 返回一个函数，该函数可以接受任意参数，例如

export const useStore = defineStore('main', {
  getters: {
    getUserById: (state) => {
      return (userId) => state.users.find((user) => user.id === userId)
    },
  },
})

组件中使用：

<script setup>
import { useUserListStore } from './store'
const userList = useUserListStore()
const { getUserById } = storeToRefs(userList)
// note you will have to use `getUserById.value` to access
// the function within the <script setup>
</script>

<template>
  <p>User 2: {{ getUserById(2) }}</p>
</template>

ps: getter 将不再被缓存，它们只是一个被你调用的函数。不过，你可以在 getter 本身中缓存一些结果，虽然这种做法并不常见，但有证明表明它的性能会更好

Action

1、如何访问其他 store 的 action

举个🌰：

import { useAuthStore } from './auth-store'

export const useSettingsStore = defineStore('settings', {
  state: () => ({
    preferences: null,
    // ...
  }),
  actions: {
    async fetchUserPreferences() {
      const auth = useAuthStore()
      if (auth.isAuthenticated) {
        this.preferences = await fetchPreferences()  //这行用了别的store的action
      } else {
        throw new Error('User must be authenticated')
      }
    },
  },
})

2、订阅 action

你可以通过 store.$onAction() 来监听 action 和它们的结果。传递给它的回调函数会在 action 本身之前执行。after 表示在 promise 解决之后，允许你在 action 解决后执行一个一个回调函数。同样地，onError 允许你在 action 抛出错误或 reject 时执行一个回调函数。这些函数对于追踪运行时错误非常有用，类似于Vue docs 中的这个提示。
这里有一个例子，在运行 action 之前以及 action resolve/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()
// this subscription will be kept even after the component is unmounted
someStore.$onAction(callback, true)
</script>

ps:这部分没有亲自写过demo，直接照搬官方文档了

插件

1、介绍

由于有了底层 API 的支持，Pinia store 现在完全支持扩展。以下是你可以扩展的内容：

为 store 添加新的属性
定义 store 时增加新的选项
为 store 增加新的方法
包装现有的方法
改变甚至取消 action
实现副作用，如本地存储
仅应用插件于特定 store
插件是通过 pinia.use() 添加到 pinia 实例的。最简单的例子是通过返回一个对象将一个静态属性添加到所有 store。例如：

import { createPinia } from 'pinia'

// 创建的每个 store 中都会添加一个名为 `secret` 的属性。
// 在安装此插件后，插件可以保存在不同的文件中
function SecretPiniaPlugin() {
  return { secret: 'the cake is a lie' }
}

const pinia = createPinia()
// 将该插件交给 Pinia
pinia.use(SecretPiniaPlugin)

// 在另一个文件中
const store = useStore()
store.secret // 'the cake is a lie'

这对添加全局对象很有用，如路由器、modal 或 toast 管理器。

2、如何拓展Store

为了能让devtools 自动追踪到，推荐使用下列方法：

pinia.use(({ store }) => {
  store.hello = 'world'
})

3、添加的属性在store中是共享还是独享，可以如下配置：

const sharedRef = ref('shared')
pinia.use(({ store }) => {
  // 每个 store 都有单独的 `hello` 属性
  store.hello = ref('secret')
  // 它会被自动解包
  store.hello // 'secret'

  // 所有的 store 都在共享 `shared` 属性的值
  store.shared = sharedRef
  store.shared // 'shared'
})

4、添加新的选项

在定义 store 时，可以创建新的选项，以便在插件中使用它们。例如，你可以创建一个 debounce 选项，允许你让任何 action 实现防抖。

defineStore('search', {
  actions: {
    searchContacts() {
      // ...
    },
  },

  // 这将在后面被一个插件读取
  debounce: {
    // 让 action searchContacts 防抖 300ms
    searchContacts: 300,
  },
})

然后，该插件可以读取该选项来包装 action，并替换原始 action：

// 使用任意防抖库
import debounce from 'lodash/debounce'

pinia.use(({ options, store }) => {
  if (options.debounce) {
    // 我们正在用新的 action 来覆盖这些 action
    return Object.keys(options.debounce).reduce((debouncedActions, action) => {
      debouncedActions[action] = debounce(
        store[action],
        options.debounce[action]
      )
      return debouncedActions
    }, {})
  }
})

注意，在使用 setup 语法时，自定义选项作为第 3 个参数传递：(前面举的例子都是 Option Store)

defineStore(
  'search',
  () => {
    // ...
  },
  {
    // 这将在后面被一个插件读取
    debounce: {
      // 让 action searchContacts 防抖 300ms
      searchContacts: 300,
    },
  }
)

以下均为亲自写过demo，以后再补充吧