vue中新的状态管理器-pinia

背景

对于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。

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，以后再补充吧

5、如何添加新的state

6、如何添加新的外部属性

7、在插件中调用 $subscribe