Pinia - vue 的状态管理库

Pinia - vue 的状态管理库

1. 介绍

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。

2. 安装和注册Pinia

• 安装pinia

yarn add pinia

• 注册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')

3. 使用pinia

• 定义store

import { defineStore } from 'pinia'

export const useTodos = defineStore('todos', {
  // 类似于data
  state: () => ({
    todos: [],
  }),
  // 类似于computed计算属性
  getters: {
    finishedTodos(state) {
      return state.todos.filter((todo) => todo.isFinished)
    }
  },
  // 类似于vue2中的methods
  actions: {
    addTodo(text) {
      this.todos.push({ text })
    },
  },
})

• 使用store中的数据和方法

<script setup>
import { useCounterStore } from '@/stores/counter'
// 可以在组件中的任意位置访问 `store` 变量 
const store = useCounterStore()
</script>

4. 定义store的方式

Store (如 Pinia) 是一个保存状态和业务逻辑的实体，它并不与你的组件树绑定。换句话说，它承载着全局状态。它有点像一个永远存在的组件，每个组件都可以读取和写入它。
一个 Store 应该包含可以在整个应用中访问的数据。另一方面，你应该避免在 Store 中引入那些原本可以在组件中保存的本地数据

• Option Store
  state 是 store 的数据 (data)，getters 是 store 的计算属性 (computed)，而 actions 则是方法 (methods)。

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

• Setup Store
  ref() 就是 state 属性, computed() 就是 getters, function() 就是 actions

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
});

5. 解构store

使用storeToRefs解构store中的数据，以保持其响应性

<script setup>
import { storeToRefs } from 'pinia'
const store = useCounterStore()
// `name` 和 `doubleCount` 是响应式的 ref
// 同时通过插件添加的属性也会被提取为 ref
// 并且会跳过所有的 action 或非响应式 (不是 ref 或 reactive) 的属性
const { name, doubleCount } = storeToRefs(store)
// 作为 action 的 increment 可以直接解构
const { increment } = store
</script>

6. 操作state

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

const store = useStore()
store.count++

• 重置state

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

• 变更state

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

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

• 替换state

store.$state = { count: 24 }
store.$patch({ count: 24 })
// 替换整个应用的初始state
pinia.state.value = {}

• 订阅state

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

7. 定义与使用getters

Getter 完全等同于 store 的 state 的计算值。 它将接收 state 作为第一个参数, 或者通过this访问其他getter。

• 定义getter

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
    doubleCountPlusOne() {
      return this.doubleCount + 1
    },
  },
});

• 访问getter

<script setup>
import { useCounterStore } from './counterStore'

const store = useCounterStore()
</script>

<template>
  <p>Double count is {{ store.doubleCount }}</p>
</template>

8. 定义与使用actions

Action 相当于组件中的 method, 用来定义业务逻辑。action 也可通过this访问整个 store 实例, 并且可以是异步的。

export const useCounterStore = defineStore('main', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
    randomizeCounter() {
      this.count = Math.round(100 * Math.random())
    },
  },
})