Vue新一代状态管理工具Pinia的具体使用

下面是详细讲解“Vue新一代状态管理工具Pinia的具体使用”的完整攻略。

什么是Pinia？

Pinia是针对Vue 3框架所开发的一种新一代状态管理工具。它基于Vue 3提供的Reactivity API，以及提供了其它更好的开发体验、更易于测试的特性，使得我们的开发更加高效和愉悦。

如何使用Pinia？

安装

在使用Pinia前，需要先安装它。可以通过以下命令进行安装：

npm install pinia

定义Store

在使用Pinia时，需要先根据业务需求定义好自己的Store。在Pinia中，并不需要特定的基类来定义Store，只需在代码中导入Pinia，并通过它提供的createStore方法来创建一个Store实例即可。

例如，下面是一个简单的示例，我们将其保存在文件src/store/count.js中：

import { defineStore } from "pinia";

export const useCountStore = defineStore('count', {
  state() {
    return {
      count: 0
    }
  },
  actions: {
    increment() {
      this.count++
    }
  },
})

在该示例中，我们定义了一个名为useCountStore的Store，它包含了一个名为count的状态和一个名为increment的Action。其中，我们使用了defineStore和state方法来定义状态，使用了actions方法来定义Action。

在组件中使用Store

在组件中使用Pinia的Store非常简单。只需通过useStore或useStoreAt方法获取到一个Store实例，就可以方便地使用它的状态和Action了。

例如，下面是一个使用useCountStore的示例组件：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { useCountStore } from '../store/count'

export default {
  setup() {
    const store = useCountStore()

    return {
      count: store.count,
      increment: store.increment
    }
  }
}
</script>

在该示例中，我们使用useCountStore方法获取到了一个名为store的Store实例，并通过它来获取状态count和Action increment，然后在template中使用它们。

在全局中使用Store

我们还可以在全局中使用Store。在Vue 3中，我们可以通过provide和inject来实现跨组件属性的共享，因此，我们在应用中可以将Store的实例作为全局属性进行provide，从而在全局中使用Store。

以下是一个简单的示例：

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
import { useCountStore } from './store/count'

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

app.use(pinia)

const store = useCountStore()

app.provide('pinia', store)

app.mount('#app')

在该示例中，我们首先通过createApp创建一个Vue实例，然后通过createPinia方法创建一个Pinia实例。接着通过app.use方法将Pinia实例应用到Vue实例中。最后通过app.provide方法将Store实例保存为全局属性进行共享。

在此之后，在任何组件中，我们可以通过inject方法获取到名为pinia的全局属性，并通过它获取到Store实例，进而使用Store的状态和Action。

在测试中使用Store

在测试中使用Store也非常简单。由于Pinia是基于Reactivity API来实现状态管理的，因此我们可以方便地在测试中手动控制State的操作，从而进行效果测试。

以下是一个Jest测试的示例：

import { useCountStore } from './count'

describe('useCountStore', () => {
  it('increment', () => {
    const store = useCountStore()

    store.increment()

    expect(store.count).toBe(1)
  })
})

在该示例中，我们通过useCountStore方法获取到Store实例，然后手动调用increment方法，并断言count状态的值是否为1。

示例展示

下面，我们来看两个具体的示例，以更好地理解Pinia的使用。

示例1：计数器

这是一个非常简单的计数器程序，其中我们使用了useCountStore来定义和管理计数器的状态，让用户可以点击按钮进行计数。

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { useCountStore } from '../store/count'

export default {
  setup() {
    const store = useCountStore()

    return {
      count: store.count,
      increment: store.increment
    }
  }
}
</script>

示例2：TodoList

这个示例展示了如何使用Pinia来进行复杂的状态管理。

我们定义了useTodoStore，其中包含了todos状态、newTodo状态、addTodo状态等。用户可以增加、删除、修改、本地存储TodoList。

import { defineStore } from 'pinia'

export const useTodoStore = defineStore('todos', {
  state() {
    return {
      todos: [],
      newTodo: ''
    }
  },

  actions: {
    addTodo() {
      if (this.newTodo.trim().length === 0) return

      this.todos.push({
        title: this.newTodo.trim(),
        done: false
      })
      this.newTodo = ''
    },

    removeTodoById(id) {
      const index = this.todos.findIndex((x) => x.id === id)
      if (index === -1) return

      this.todos.splice(index, 1)
    },

    toggleDoneById(id) {
      const index = this.todos.findIndex((x) => x.id === id)
      if (index === -1) return

      this.todos[index].done = !this.todos[index].done
    },

    saveToLocal() {
      localStorage.setItem('todos', JSON.stringify(this.todos))
    },

    loadFromLocal() {
      const data = localStorage.getItem('todos')
      if (data) {
        this.todos = JSON.parse(data)
      }
    }
  },

  getters: {
    allDone() {
      return this.todos.every(todo => todo.done === true)
    }
  }
})

在组件中使用useTodoStore来获取todos状态，以及其它相关Action和Getter，实现TodoList的管理。

<template>
  <div>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox"
          :checked="todo.done"
          @change="toggleDone(todo.id)">
        <span :class="{ 'done': todo.done }">{{ todo.title }}</span>
        <button @click="removeTodoById(todo.id)">x</button>
      </li>
    </ul>
    <form>
      <input type="text" v-model="newTodo">
      <button @click.prevent="addTodo">Add</button>
    </form>
  </div>
</template>

<script>
import { useTodoStore } from '../store/todo'

export default {
  setup() {
    const store = useTodoStore()

    return {
      todos: store.todos,
      newTodo: store.newTodo,
      addTodo: store.addTodo,
      toggleDone: store.toggleDoneById,
      removeTodoById: store.removeTodoById
    }
  },

  created() {
    this.$watch(() => this.todos, () => {
      this.$nextTick(() => {
        this.saveToLocal()
      })
    }, { deep: true })
    this.loadFromLocal()
  }
}
</script>