共计 7040 个字符，预计需要花费 18 分钟才能阅读完成。
Pinia (发音为 /piːnjʌ/，相似英文中的“peenya”) 是最靠近无效包名 piña（西班牙语中的 pineapple，即“菠萝”）的词。菠萝花实际上是一组各自独立的花朵，它们联合在一起，由此造成一个多重的水果。与 Store 相似，每一个都是独立诞生的，但最终它们都是互相分割的。它（菠萝）也是一种原产于南美洲的美味寒带水果。
pinia 作为 vue 官网举荐的状态管理器，先不说别的，看文档用一下再说
pinia 的用法多少会和 vuex 有些不同，缓缓学习在找不一样的中央。
pinia 劣势
- 为 JS 开发者提供适当的 TypeScript 反对以及 autocompletion 性能。
- 反对服务端渲染
pinia 应用
须要通过办法来定义状态, 并且定义状态
import {defineStore} from 'pinia'两种办法定义状态，一种为选项式，一种为函数式（文档中称说与组件 setup() 相似）
// 选项式用法
export const useCounterStore = defineStore('counter', {state: () => {return { count: 0}
},
actions: {increment() {this.count++},
},
})// 函数式用法
export const useCounterStore = defineStore('counter', () => {const count = ref(0)
function increment() {count.value++}
return {count, increment}
})（可先略过 ）如果用选项式的话，Pinia 也提供了一组相似 Vuex 的 map helpers。你能够用和之前一样的形式来定义 Store，而后通过 mapStores()、mapState() 或 mapActions() 应用
const useCounterStore = defineStore('counter', {state: () => ({count: 0}),
getters: {double: (state) => state.count * 2,
},
actions: {increment() {this.count++},
},
})
const useUserStore = defineStore('user', {// ...})
export default {
computed: {
// 其余计算属性
// ...
// 容许拜访 this.counterStore 和 this.userStore
...mapStores(useCounterStore, useUserStore)
// 容许读取 this.count 和 this.double
...mapState(useCounterStore, ['count', 'double']),
},
methods: {// 容许读取 this.increment()
...mapActions(useCounterStore, ['increment']),
},
}之后须要在入口文件 main.js 外面注入状态
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')什么是 Store 并且什么时候用 Store 就不在这里赘述了。
定义 store
export const useStore = defineStore('main', {// 其余配置...})这个 name，也被用作 id，是必须传入的，Pinia 将用它来连贯 store 和 devtools。为了养成习惯性的用法，将返回的函数命名为 use… 是一个合乎组合式函数的常规。
defineStore() 的第二个参数可承受两类值：Setup 函数或 Option 对象。
选项式定义 store
export const useCounterStore = defineStore('counter', {state: () => ({count: 0}),
getters: {double: (state) => state.count * 2,
},
actions: {increment() {this.count++},
},
})你能够认为 state 是 store 的数据（data），getters 是 store 的计算属性（computed），而 actions 则是办法（methods）
为不便上手应用，选项式 Store 应尽可能直观简略。
函数式定义 store
export const useCounterStore = defineStore('counter', () => {const count = ref(0)
function increment() {count.value++}
return {count, increment}
})在 Setup Stores 中：
ref()s 就是 state 属性
computed()s 就是 getters
function()s 就是 actions
Setup stores 比 Options Stores 带来了更多的灵活性， 因为你能够在一个 store 内创立 watchers，并自在地应用任何组合式函数。然而，请记住，应用组合式函数会让 SSR 变得更加简单。
倡议先应用选项式相熟 pinia。
请留神，store 是一个用 reactive 包装的对象，这意味着不须要在 getters 前面写 .value，就像 setup 中的 props 一样，如果你写了，咱们也不能解构它：
export default defineComponent({setup() {const store = useCounterStore()
// ❌ 这将无奈失效，因为它毁坏了响应式
// 这与从 `props` 中解构是一样的。const {name, doubleCount} = store
name // "eduardo"
doubleCount // 2
return {
// 始终是 "eduardo"
name,
// 始终是 2
doubleCount,
// 这个将是响应式的
doubleValue: computed(() => store.doubleCount),
}
},
})为了从 store 中提取属性时放弃其响应性，你须要应用 storeToRefs()。
import {storeToRefs} from 'pinia'
export default defineComponent({setup() {const store = useCounterStore()
// `name` and `doubleCount` 都是响应式 refs
// 这也将为由插件增加的属性创立 refs
// 同时会跳过任何 action 或非响应式（非 ref/ 响应式）属性
const {name, doubleCount} = storeToRefs(store)
// 名为 increment 的 action 能够间接提取
const {increment} = store
return {
name,
doubleCount,
increment,
}
},
})store 中的 state
在大多数状况下，state 都是你的 store 的外围。人们通常会首先定义能代表他们 APP 的 state。在 Pinia 中，state 被定义为一个返回初始状态的函数。这使得 Pinia 能够同时反对服务端和客户端。
默认状况下，你能够通过 store 实例拜访 state，间接对其进行读写。
你能够通过调用 store 的 $reset() 办法将 state 重置为初始值，比如说在推出登录或者退出一些模块的时候能够应用该办法。
const store = useStore()
store.$reset()如果你想批改这些 state 属性（例如，如果你有一个表单），你能够应用 mapWritableState() 来代替。但留神你不能像 mapState() 那样传递一个函数 (前期再联合例子整顿)
批改 state 中的值
store.count++ // 第一种办法，间接批改
// 第二种办法 你还能够调用 $patch 办法。它容许你用一个 state 的补丁对象在同一时间更改多个属性：store.$patch({
count: store.count + 1,
age: 120,
name: 'DIO',
})然而，用这种 $patch 语法的话，有些变更真的很难实现或者很耗时：任何汇合的批改（例如，从数组中推送、移除、拼接一个元素）都须要你创立一个新的汇合。因而，**$patch 办法也承受一个函数来组合这种难以用补丁对象实现的变更 **。
cartStore.$patch((state) => {state.items.push({ name: 'shoes', quantity: 1})
state.hasChanged = true
})你不能齐全替换掉 store 的 state，因为那会毁坏响应性。然而，你能够 patch 它。
// 这实际上并没有替换 `$state`
store.$state = {count: 24}
// 在它外部调用 `$patch()`：store.$patch({count: 24})订阅 state
相似于 Vuex 的 subscribe 办法，你能够通过 store 的 $subscribe() 办法观测 state 及其变动。比起一般的 watch()，应用 $subscribe() 的益处是 subscriptions 在 patch 后只触发一次（例如，当应用下面的函数版本时）。
cartStore.$subscribe((mutation, state) => {// import { MutationType} from 'pinia'
mutation.type // 'direct' | 'patch object' | 'patch function'
// 和 cartStore.$id 一样
mutation.storeId // 'cart'
// 只有 mutation.type === 'patch object' 的状况下才可用
mutation.payload // 传递给 cartStore.$patch() 的补丁对象。// 每当状态发生变化时，将整个 state 长久化到本地存储。localStorage.setItem('cart', JSON.stringify(state))
})默认状况下，state subscriptions 会被绑定到增加它们的组件上（如果 store 在组件的 setup() 外面）。这意味着，当该组件被卸载时，它们将被主动删除。如果你想在组件卸载后仍旧保留它们，请将 { detached: true} 作为第二个参数，以将 state subscription 从以后组件中 detach：
export default {setup() {const someStore = useSomeStore()
// 在组件被卸载后，该订阅依旧会被保留。someStore.$subscribe(callback, { detached: true})
// ...
},
}store 中的 getter
Getter 齐全等同于 store 的 state 的计算值。能够通过 defineStore() 中的 getters 属性来定义它们。举荐应用箭头函数，并且它将接管 state 作为第一个参数：
export const useStore = defineStore('main', {state: () => ({count: 0,}),
getters: {doubleCount: (state) => state.count * 2,
},
})- 能够拜访其余 getters
export const useStore = defineStore('main', {state: () => ({count: 0,}),
getters: {
// 类型是主动推断进去的，因为咱们没有应用 `this`
doubleCount: (state) => state.count * 2,
doubleCountPlusOne() {
// 主动补全 ✨
return this.doubleCount + 1
},
},
})- 能够向 getter 传递参数
export const useStore = defineStore('main', {
getters: {getUserById: (state) => {return (userId) => state.users.find((user) => user.id === userId)
},
},
})组件中应用
<script>
export default {setup() {const store = useStore()
return {getUserById: store.getUserById}
},
}
</script>
<template>
<p>User 2: {{getUserById(2) }}</p>
</template>请留神，当你这样做时，getter 将不再被缓存，它们只是一个被你调用的函数。不过，你能够在 getter 自身中缓存一些后果，尽管这种做法并不常见，但能够证实的是它的性能会更好：
export const useStore = defineStore('main', {
getters: {getActiveUserById(state) {const activeUsers = state.users.filter((user) => user.active)
return (userId) => activeUsers.find((user) => user.id === userId)
},
},
})store 中的 action
Actions 相当于组件中的 method。它们能够通过 defineStore() 中的 actions 属性来定义，并且它们也是定义业务逻辑的完满抉择。
相似 getter，action 也可通过 this 拜访整个 store 实例，并反对残缺的类型束缚（以及主动补全✨）。不同的是，action 能够是异步的，你能够在它们外面 await 调用任何 API，以及其余 action！上面是一个应用 Mande 的例子。请留神，你应用什么库并不重要，只有你失去的是一个 Promise，你甚至能够应用原生 fetch 函数（在浏览器中）：
所有的异步申请能够在 action 外面编写
...
actions: {async registerUser(login, password) {
try {this.userData = await api.post({ login, password})
showTooltip(`Welcome back ${this.userData.name}!`)
} catch (error) {showTooltip(error)
// 让表单组件显示谬误
return error
}
},
},
...订阅 action
你能够通过 store.$onAction() 来监测 action 和它们的后果。传递给它的回调函数会在 action 自身之前执行。after 示意在 promise 解决之后，容许你在 action 解决后执行一个一个回调函数。同样地，onError 容许你在 action 抛出谬误或 reject 时执行一个回调函数。这些函数对于追踪运行时谬误十分有用，相似于 Vue docs 中的这个提醒。
这里有一个例子，在运行 action 之前以及 action resolve/reject 之后打印日志记录。
const unsubscribe = someStore.$onAction(
({
name, // action 名称
store, // store 实例，相似 `someStore`
args, // 传递给 action 的参数数组
after, // 在 action 返回或解决后的钩子
onError, // action 抛出或回绝的钩子
}) => {
// 为这个特定的 action 调用提供一个共享变量
const startTime = Date.now()
// 这将在执行 "store" 的 action 之前触发。console.log(`Start "${name}" with params [${args.join(',')}].`)
// 这将在 action 胜利并齐全运行后触发。// 它期待着任何返回的 promise
after((result) => {
console.log(`Finished "${name}" after ${Date.now() - startTime
}ms.\nResult: ${result}.`
)
})
// 如果 action 抛出或返回一个回绝的 promise，这将触发
onError((error) => {
console.warn(`Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`
)
})
}
)
// 手动删除监听器
unsubscribe()默认状况下，action 订阅器 会被绑定到增加它们的组件上（如果 store 在组件的 setup() 内）。这意味着，当该组件被卸载时，它们将被主动删除。如果你想在组件卸载后仍旧保留它们，请将 true 作为第二个参数传递给 action 订阅器，以便将其从以后组件中剥离（detach）：
export default {setup() {const someStore = useSomeStore()
// 在组件被卸载后，这个订阅依旧会被保留。someStore.$onAction(callback, true)
// ...
},
}