Pinia 开始是一个实验，但很快就成为 Vue 3 的主要选择。它提供了比 Vuex 更多的 API ，有更好的架构和更直观的语法，充分利用了组合 API。
在开发工具的支持上（状态检查、带动作的时间线和时间旅行的能力），以及 Vuex 所提供的使用插件的扩展性，pinia 在设计上是类型安全和模块化的，这是使用 Vuex 时最大的两个痛点。
此外，定义 story 的语法与 Vuex 模块非常相似，这使得迁移的工作量非常小，而在使用该 store 时，用到的 API，接近于 Vue3 使用组合 API 的方式。
import { defineStore } from 'pinia'
export const useFellowship = defineStore('fellowship', {
state: () => {
return { heroes: ['Aragorn', 'Legolas', 'Gimli', 'Gandalf'] }
},
actions: {
addHero(hero) {
this.heroes.push(hero)
},
},
})
<script>
import { useFellowship } from '@/stores/fellowship'
export default {
setup() {
const fellowship = useFellowship()
// 对状态的访问
//可以直接进行
console.log(fellowship.heroes)
// Using an action
fellowship.addHero('Boromir')
},
}
</script>
你可能已经注意到的，最大的区别是 mutations 完全消失了。它们通常被认为是极其冗长的，而使用它们没有任何真正的好处。此外，也不再需要命名空间了。有了新的导入 store 的方式，所有的东西都被设计成了命名空间。这意味着，在 Pinia 中，你没有一个带有多个模块的 store ，而是有多个按需导入和使用的 store 。
Pinia Setup Store
Pinia 支持另一种语法来定义 store。它使用一个定义响应式属性和方法的函数，并返回它们，与 Vue Composition API 的 setup 函数非常相似。
import { defineStore } from 'pinia'
export const useFellowship = defineStore('fellowship', () => {
const heroes = ref([]);
function addHero(hero) {
heroes.value.push(hero)
}
return {
heroes,
addHero
};
})
在 Setup Stores 中：
ref()成为state属性computed()成为gettersfunction()成为actions
Setup stores 比 Options Store 带来了更多的灵活性，因为可以在一个 store 内创建 watchers ，并自由使用任何可组合的。
一个更实际的例子
创建一个 fellowship store，它可以容纳一个 heroes 列表，并能添加和删除对应的元素：
import { defineStore } from 'pinia'
export const useFellowship = defineStore('fellowship', {
state: () => ({
heroes: [],
filter: 'all',
// type will be automatically inferred to number
id: 1
}),
getters: {
aliveHeroes(state) {
return state.heroes.filter((hero) => hero.isAlive)
},
deadHeroes(state) {
return state.heroes.filter((hero) => !hero.isAlive)
},
filteredHeroes() {
switch (this.filter) {
case 'alive':
return this.aliveHeroes
case 'dead':
return this.deadHeroes
default:
return this.heroes
}
}
},
actions: {
addHero(name) {
if (!name) return
// Directly mutating the state!
this.heroes.push({ name, id: this.id++, isAlive: true })
},
killHero(name) {
this.heroes = this.heroes.map((hero) => {
if (hero.name === name) {
hero.isAlive = false
}
return hero
})
},
setActiveFilter(filter) {
this.filter = filter
}
}
})
如果你熟悉 Vuex，那么理解这段代码应该不是什么难事。
首先，每个 state 都需要一个作为命名空间的键。这里，我们使用 fellowship。
state 是一个函数，保存这个 store 的所有响应性数据，getters 是访问 store 里面的数据。state 和 getters 都与 Vuex 相同。
但对于 actions 来说与 Vuex 差异比较大。上下文参数已经消失了，actions 可以直接通过 this 访问 state 和 getters 。你可能已经注意到的，actions 直接操作 state，这在 Vuex 中是被严格禁止的。
最后，由于状态操作现在是在 actions 进行的，所以 mutations 被完全删除。
使用 pinia store 很简单:
<script>
import { useFellowship } from '../store/fellowship'
import HeroFilters from './HeroFilters'
export default {
name: 'MiddleEarth',
components: {
HeroFilters
},
setup() {
const fellowship = useFellowship()
return {
fellowship
}
}
}
</script>
<template>
<div>
<template v-if="fellowship.heroes.length">
<HeroFilters />
<ol>
<li v-for="hero in fellowship.filteredHeroes" :key="hero.id">
{{ hero.name }} - {{ hero.isAlive ? 'Alive' : 'Dead' }}
<button v-if="hero.isAlive" @click="fellowship.killHero(hero.name)">Kill</button>
</li>
</ol>
</template>
<p v-else>Your fellowship is empty</p>
<div>
<input type="text" ref="heroName" />
<input type="button" value="Add new hero" @click="fellowship.addHero($refs.heroName.value)" />
<p>
Sugestions:
<button
v-for="suggestion in ['Aragorn', 'Legolas', 'Gimli']"
:key="suggestion"
@click="fellowship.addHero(suggestion)"
>
{{ suggestion }}
</button>
</p>
</div>
</div>
</template>
所有的逻辑都发生在 setup 函数中。导入的 useFellowship 钩子被执行并返回。这样在 template 就可以直接。
当然，这个组件应该被分解成更小的可重复使用的组件，但为了演示的目的，就先这样吧。
如果一个不同的组件需要访问相同的 state，可以用类似的方式来完成。
<script>
import { useFellowship } from '../store/fellowship'
export default {
name: 'HeroFilters',
setup() {
const fellowship = useFellowship()
return {
fellowship
}
}
}
</script>
<template>
<div>
Filter:
<div v-for="filter in ['all', 'dead', 'alive']" :key="filter">
<input
type="radio"
:value="filter"
:id="filter"
@click="fellowship.setActiveFilter(filter)"
v-model="fellowship.filter"
/>
<label :for="filter">{{ filter }}</label>
</div>
</div>
</template>
从 Vuex 迁移到 Pinia
Pinia 的文档很乐观，认为代码可以在库之间重复使用，但事实是，架构非常不同，肯定需要重构。首先，在 Vuex 中，我们有一个带有多个模块的 store ，而 Pinia 是围绕着多个 store 的概念建立的。将这一概念过渡到 Pinia 中的最简单方法是，以前使用的每个模块现在都是一个 store 。
此外，mutations 不再存在。相反，这些应该转换为直接访问和改变状态的操作。
Actions 不再接受上下文作为其第一个参数。它们应该被更新以直接访问状态或任何其他上下文属性。这同样适用于 rootState、rootGetters等，因为单一全局存储的概念并不存在。如果你想使用另一个 store，需要明确地导入它。
很明显，对于大型项目来说，迁移将是复杂和耗时的，但希望大量的模板代码将被消除，store 将遵循一个更干净和模块化的架构。改造可以逐个模块进行，而不是一次性改造所有内容。实际上，在迁移过程中，可以将 Pinia 和 Vuex 混合在一起，这种方法对于复杂的项目来说也是不错的选择。
总结
预测未来并不容易，但就目前而言，Pinia 是最安全的赌注。它提供了一个模块化的架构，通过设计实现类型安全，并消除了模板代码。如果你要用 Vue 3 开始一个新的项目，Pinia 是值得推荐的选择。
如果你已经在使用 Vuex，你可以在迁移到 Pinia 之前升级到第 4 版，因为这个过程看起来很简单，但需要大量的时间。