Pinia的基本用法

Pinia的基本用法

基本定义

import { defineStore } from 'pinia';

// Option Store
export const useBaseStore = defineStore('base', {
  // 相当于data，用于存储数据
  state: () => ({
    count: 0,
  }),
  // 相当于computed，自动计算数据
  getters: {
    double: (state) => state.count * 2,
  },
  // 相当于methods，调用执行
  actions: {
    increment() {
      this.count++;
    },
  },
});

// Setup Store
// Setup Store中必须返回state的所有属性，不允许设置私有属性，若不完整返回会影响SSR，开发工具和其他插件的正常运行
import { ref, computed } from 'vue';
export const useBaseStore2 = defineStore('base2', () => {
  const count = ref(0);
  const doubleCount = computed(() => count.value * 2);
  function increment() {
    count.value++;
  }

  return {
    count,
    doubleCount,
    increment,
  };
});

不能直接从store中解构state的值，但是可以解构action
为了从store中提取属性时保持其响应式，需要使用storeToRefs()，这可以从pinia包直接引入（import { storeToRefs } from 'pinia'）。

State

访问state

默认情况下，你可以通过store实例访问state，直接对其进行读写。

const store = useStore()
store.count++

重置state

使用选项式 API时，你可以通过调用store的$reset()方法将stat重置为初始值。

const store = useStore()
store.$reset()

在$reset()内部，会调用state()函数来创建一个新的状态对象，并用它替换当前状态。
在Setup Stores中，您需要创建自己的$reset()方法：

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)

  function $reset() {
    count.value = 0
  }

  return { count, $reset }
})

变更state

除了用store.count++直接改变store，你还可以调用$patch方法。它允许你用一个state的补丁对象在同一时间更改多个属性：

store.$patch({
  count: store.count + 1,
  age: 120,
  name: 'DIO',
})

不过，用这种语法的话，有些变更真的很难实现或者很耗时：任何集合的修改（例如，向数组中添加、移除一个元素或是做splice操作）都需要你创建一个新的集合。因此，$patch方法也接受一个函数来组合这种难以用补丁对象实现的变更。

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

两种变更 store 方法的主要区别是，$patch()允许你将多个变更归入 devtools 的同一个条目中。同时请注意，直接修改state，$patch()也会出现在 devtools 中，而且可以进行 time travel (在 Vue 3 中还没有)。

替换state

你不能完全替换掉 store 的 state，因为那样会破坏其响应性。但是，你可以 patch 它。

// 这实际上并没有替换`$state`
store.$state = { count: 24 }
// 在它内部调用 `$patch()`：
store.$patch({ count: 24 })

你也可以通过变更pinia实例的state来设置整个应用的初始 state。这常用于 SSR 中的激活过程。

pinia.state.value = {}

订阅state

类似于 Vuex 的 subscribe 方法，你可以通过 store 的$subscribe()方法侦听 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))
})

默认情况下，state subscription 会被绑定到添加它们的组件上 (如果 store 在组件的 setup() 里面)。这意味着，当该组件被卸载时，它们将被自动删除。如果你想在组件卸载后依旧保留它们，请将 { detached: true } 作为第二个参数，以将 state subscription 从当前组件中分离：

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

TIP
你可以在 pinia 实例上使用 watch() 函数侦听整个 state。

watch(
  pinia.state,
  (state) => {
    // 每当状态发生变化时，将整个 state 持久化到本地存储。
    localStorage.setItem('piniaState', JSON.stringify(state))
  },
  { deep: true }
)

Getter

Getter 完全等同于 store 的 state 的计算值。可以通过defineStore()中的getters属性来定义它们。推荐使用箭头函数，并且它将接收state作为第一个参数；也可以使用this获取到整个store实例

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    // 自动推断出返回类型是一个 number
    doubleCount(state) {
      return state.count * 2
    },
    // 返回类型**必须**明确设置
    doublePlusOne(): number {
      // 整个 store 的 自动补全和类型标注 ✨
      return this.doubleCount + 1
    },
  },
})

向Getter传递参数

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

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

export const useUserListStore = defineStore('userList', {
  getters: {
    getUserById: (state) => {
      const activeUsers = state.users.filter((user) => user.active)
      return (userId) => state.users.find((user) => user.id === userId)
    },
  },
})

访问其他 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
    },
  },
})

Action

Action 相当于组件中的 method。它们可以通过defineStore()中的 actions 属性来定义，并且它们也是定义业务逻辑的完美选择。

Action 也可通过 this 访问整个 store 实例。不同的是，action可以是异步的，你可以在它们里面await调用任何 API，以及其他 action！

export const useCounterStore = defineStore('main', {
  state: () => ({
    count: 0,
  }),
  actions: {
    async registerUser(login, password) {
      try {
        this.userData = await api.post({ login, password })
        showTooltip(`Welcome back ${this.userData.name}!`)
      } catch (error) {
        showTooltip(error)
        // 让表单组件显示错误
        return error
      }
    },
    increment() {
      this.count++
    },
    randomizeCounter() {
      this.count = Math.round(100 * Math.random())
    },
  },
})