带你熟练掌握Vue3之Pinia状态管理

带你熟练掌握Vue3之Pinia状态管理攻略

什么是Pinia?

Pinia 是一个由 Eduardo San Martin Morote （Vue.js 核心团队成员）开发的 Vue.js3 状态管理库。

相较于 Vuex，在语法上有了很多的优化和改进，个人认为更易于学习使用，这里我们就来看一下如何使用它。

安装

在使用 Pinia 之前，需要确保先安装 Vue.js3 和 Pinia，可以使用以下命令进行安装：

npm install vue@next @pinia/core @pinia/vue3

或是使用 Yarn 进行安装：

yarn add vue@next @pinia/core @pinia/vue3

创建 Pinia 实例

创建一个 Pinia 实例只需要调用 createPinia() 方法即可：

import { createPinia } from '@pinia/core'

const pinia = createPinia()

定义状态

定义状态需要使用 defineStore() 方法，该方法接受一组状态和行为定义，最终返回一个带有 getter 属性和 mutation 方法的对象。

import { defineStore } from '@pinia/core'

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

注册状态

注册状态需要使用 app.use() 方法，并且将其添加到 app 对象中。

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from '@pinia/core'
import { useCounterStore } from './store'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.use(useCounterStore)

app.mount('#app')

使用状态

最后，通过 useStore() 函数来引用状态存储：

import { useStore } from '@pinia/vue3'
import { useCounterStore } from './store'

export default {
  setup() {
    const store = useStore(useCounterStore)

    const increment = () => {
      store.increment()
    }

    return { store, increment }
  }
}

示例说明

下面是一个简单的使用序：

假设有一个任务列表，任务的状态有 todo、doing 和 done 三种，我们需要记录每个任务的状态并根据状态进行过滤：

// store.js
import { defineStore } from '@pinia/core'

export const useTaskStore = defineStore('task', {
  state: () => ({
    tasks: [
      { id: 1, title: '完成todo状态的任务', status: 'todo' },
      { id: 2, title: '完成doing状态的任务', status: 'doing' },
      { id: 3, title: '完成done状态的任务', status: 'done' }
    ]
  }),
  getters: {
    todoTasks(state) {
      return state.tasks.filter(task => task.status === 'todo')
    },
    doingTasks(state) {
      return state.tasks.filter(task => task.status === 'doing')
    },
    doneTasks(state) {
      return state.tasks.filter(task => task.status === 'done')
    }
  },
  actions: {
    updateTaskStatus(id, status) {
      const task = this.tasks.find(task => task.id === id)

      if (task) {
        task.status = status
      }
    }
  }
})

首先是定义状态，通过 defineStore() 方法定义 task 状态，并包含了它的初始状态和一些 getter 和 action 方法。

在公共组件中，使用 useStore() 方法来获取 $task 状态，并通过 $task.todoTasks 等 getter 方法获取当前任务状态的信息，并渲染到页面上。

接着，通过自定义指令跟踪用户的操作，当用户点击“完成”按钮时，我们触发一个 updateTaskStatus() 行为来更新任务状态：

// App.vue
<template>
  <div>
    <button @click="$task.updateTaskStatus(1, 'doing')">开始任务</button>
    <button @click="$task.updateTaskStatus(1, 'done')">完成任务</button>
    <ul>
      <li v-for="task in $task.todoTasks" :key="task.id">{{ task.title }}</li>
    </ul>
    <ul>
      <li v-for="task in $task.doingTasks" :key="task.id">{{ task.title }}</li>
    </ul>
    <ul>
      <li v-for="task in $task.doneTasks" :key="task.id">{{ task.title }}</li>
    </ul>
  </div>
</template>

<script>
import { useStore } from '@pinia/vue3'
import { useTaskStore } from './store'

export default {
  directives: {
    track: {
      beforeMount(el, binding) {
        const { instance } = el.__vnode
        const task = instance.$task
        const id = binding.value.id
        const status = binding.value.status

        el.addEventListener('click', () => {
          task.updateTaskStatus(id, status)
        })
      }
    }
  },
  setup() {
    const store = useStore(useTaskStore)

    return { store }
  }
}
</script>

至此，我们就实现了一个简单的任务列表，并通过 Pinia 来管理任务状态，方便地实现了任务状态数据和视图的同步。

以上就是关于 Pinia 的使用介绍，相信通过上面的示例，大家已经初步了解了它的基本使用方式，有一些基础的知识储备之后就可以开始使用它啦！