本章节请配合`Pinia快速上手章节`该文章食用,下列内容会结合该文章内的例子进行讲解,标红部分表示该文章内容

没基础的,请先看上一篇Pinia文章,这样对这篇的内容会更方便理解。

前情提要:

  1. 不讲多store互相使用(看上个文章);
  2. 如果有些你觉得我讲了你看不懂,请先看上一篇文章,太基础的或上一篇已有的这里则会没讲!

# State

大多数时候,`state` 是一个 Store 的主要部分。通常从定义 state 开始,代表vue实例的Store应用。
1. 定义、使用 state 见上一篇文章
2. 重置state数据:
  您可以通过调用 store 上的方法将状态重置为其初始值:$reset()
  const store = useStore()
  store.$reset()
3. 修改state数据:
  store.property = xxxx
  store.$patch({}) // 或者这样,这种可以统一多个修改
  store.$patch((state)=>{ /** 这里修改state */ }) // $patch 方法还接受一个函数,用于应对复杂数据的修改过程
4. 更换state:
  $state您可以通过将商店的属性设置为新对象来替换Store的整个状态:
  store.$state = { counter: 666, name: 'Paimon' }
5. 订阅state:
  store.$subscribe((mutation, state) => {
    // import { MutationType } from 'pinia'
    mutation.type // 'direct' | 'patch object' | 'patch function'
    // same as cartStore.$id > store 的 name
    mutation.storeId // 'cart'
    // only available with mutation.type === 'patch object'
    mutation.payload // patch object passed to cartStore.$patch()
    // 无论何时更改,都将整个状态保留到本地存储  >  persist the whole state to the local storage whenever it changes
    localStorage.setItem('cart', JSON.stringify(state))
  },{ detached: false })
  // detached 默认是false,表示当组件被卸载时,$subscribe 订阅将被自动删除。
  // 如果要在组件卸载后保留 $subscribe 订阅,则改为 true 以从当前组件中分离状态订阅:


# Getters

声明、使用的案例见3. 4.
1- Getter 完全等同于Store里的state的computed值。
2- 他们接收state作为第一个参数,鼓励使用箭头函数功能:
3- 外部(组件)将参数传递给 getter  >>> 见下面代码的 getUserById
4- 访问其他store的getters

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    // 类型是自动推断的,因为我们没有使用 this  >> type is automatically inferred because we are not using `this`
    // 自动将返回类型推断为number >> automatically infers the return type as a number
    doubleCount(state) {
      return state.counter * 2
    },
    // 必须显式设置返回的数据类型
    doublePlusOne(): number {
      // 整个store的自动完成和typings(不知道咋翻译)  >>  autocompletion and typings for the whole store ✨
      return this.counter * 2 + 1
      
      // 与计算属性一样,您可以组合多个 getter。通过 this 访问任何其他 getter
      // return this.doubleCount * 2 + 1
    },
    getUserById: (state) => {
      // Getter只是在幕后计算的属性,因此不可能将任何参数传递给它们。但是,您可以从getter返回一个函数以接受任何参数:
      // 请注意,执行此操作时,getter 不再缓存,它们只是您调用的函数。但是,您可以在 getter 本身内部缓存一些结果,这并不常见,但应该证明性能更高: 这段话的功能,要用再去参考官网
      return (userId) => state.users.find((user) => user.id === userId)
    },
    // 要使用其他store 的 getter,您可以直接在getter内部使用它:
    otherGetter(state) {
      const otherStore = useOtherStore()
      return state.localData + otherStore.data
    },
  },
})

上面的功能3演示

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

<script>
export default {
  setup() {
    const store = useStore()
    store.counter = 3
    console.log(store.doubleCount) // 6  >> 跟state一样,可直接访问。
    return {
      getUserById: store.getUserById
    }
  },
}
</script>

# Actions

Actions 相当于组件中的 methods。
1- 你也可以完全自由地设置你想要的任何参数并返回任何东西。调用actions时,一切都会自动推断!
2- 访问其他store的actions等内容;
3- 订阅actions;
  传递给订阅的回调比actions事件先一步执行。
  默认情况下,actions订阅绑定到添加它们的组件(如果Store位于组件内部setup()里)。意思是,当组件被卸载时,它们将被自动删除。如果要在卸载组件后保留它们,传入第二个参数 true 用以将actions订阅与当前组件分离。

import { useAuthStore } from './auth-store'
export const useSettingsStore = defineStore('settings', {
  state: () => ({
    // ...
  }),
  actions: {
    fetchUserPreferences(preferences) {
      const auth = useAuthStore() 
      console.log(auth)
    },
  },
})

订阅actions

export default {
  setup() {
    const someStore = useSomeStore()

    const unsubscribe = someStore.$onAction(
      ({
        name, // name of the action
        store, // store instance, same as `someStore`
        args, // array of parameters passed to the action
        after, // hook after the action returns or resolves
        onError, // hook if the action throws or rejects
      }) => {
        // a shared variable for this specific action call
        const startTime = Date.now()
        // this will trigger before an action on `store` is executed
        console.log(`Start "${name}" with params [${args.join(', ')}].`)

        // this will trigger if the action succeeds and after it has fully run.
        // it waits for any returned promised
        after((result) => {
          console.log(
            `Finished "${name}" after ${
              Date.now() - startTime
            }ms.\nResult: ${result}.`
          )
        })

        // this will trigger if the action throws or returns a promise that rejects
        onError((error) => {
          console.warn(
            `Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`
          )
        })
      }
    )

    // 可手动销毁订阅 manually remove the listener
    unsubscribe()
    // ...
  },
}

Pinia是刚学几小时,相关例子不是特别丰富,但功能还是表述出来了和简单的写了。自己也多动手敲!!

Pinia 进阶的 Plugins 后续会再写一篇文章进行讲解。


QQ交流群:522976012  ,欢迎来玩。

聚焦vue3,但不限于vue,任何前端问题,究其本质,值得讨论,研究与学习。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐