手写VUE后台管理系统5 - 整合状态管理组件pinia

pinia 是一个拥有组合式 API 的 Vue 状态管理库。
pinia 官方文档：https://pinia.vuejs.org/zh/introduction.html

安装

yarn add pinia

整合

所有与状态相关的文件都放置于项目 src/store 目录下，方便管理

在 src 下创建目录 store，目录设计如下：

• index.ts：创建 pinia 实例
• modules：状态管理目录，所以的状态文件统一放置于该目录下

创建实例

创建 index.ts 文件，内容如下

import { createPinia } from 'pinia'

const store = createPinia()

export default store

挂载

在 main.ts 文件中进行挂载

import { createApp } from 'vue'
import App from './App.vue'
import store from '@/store'

const app = createApp(App)
app.use(store)
app.mount('#app')

使用

定义Store

pinia 通过 defineStore 函数进行定义，第一个参数是名称，名称必须保持唯一，第二个参数有两种实现方法：Option 对象及 Setup 函数，接下来将分别介绍这两种方式如何实现定义。

• Option Store

简单的理解：state 用于定义状态对象，getters 相当于 computed 计算属性，actions 相当于方法

import { defineStore } from 'pinia'

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

• Setup Store

setup 函数更像 vue 的组合式函数，在函数中可以定义响应式属性、方法等，最后返回一个需要暴露出去的属性和方法的对象。

• ref 定义状态对象，对应 Option 模式的 state
• computed 定义计算属性，对应 Option 模式的 getters
• function 定义方法，对应 Option 模式的 actions

import { defineStore } from 'pinia'

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

  return { count, increment }
})

使用Store

状态对象及计算属性需要使用 storeToRefs 方法进行提取，以保持及响应性，而方法则可以直接调用

const counterStore = useCounterStore()
const { count } = storeToRefs(counterStore)
counterStore.increment()