Pinia
Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态
- dev-tools 支持
跟踪动作、突变的时间线
Store 出现在使用它们的组件中
time travel 和 更容易的调试 - 热模块更换
在不重新加载页面的情况下修改您的 Store
在开发时保持任何现有状态 - 插件：使用插件扩展 Pinia 功能
- 为 JS 用户提供适当的 TypeScript 支持或
- autocompletion
- 服务器端渲染支持
定义一个store
Store 是使用 defineStore() 定义的，并且它需要一个唯一名称，作为第一个参数传递：
import { defineStore } from 'pinia'
// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('counter', {
return {
// other options...
};
})
这个 name，也称为 id，是必要的，Pinia 使用它来将 store 连接到 devtools。 将返回的函数命名为 use... 是跨可组合项的约定，以使其符合你的使用习惯。
使用store
我们正在定义一个store，因为setup（）调用之前不会创建store:
import { useStore } from '@/stores/counter'
export default {
setup() {
const store = useStore()
return {
// 您可以返回整个 store 实例以在模板中使用它
store,
}
},
}
请注意，store是一个用reactive 包裹的对象，这意味着不需要在getter 之后写.value，但是，就像setup中的props一样，我们不能对其进行解构：
export default defineComponent({
setup() {
const store = useStore()
// ❌ 这不起作用，因为它会破坏响应式
// 这和从 props 解构是一样的
const { name, doubleCount } = store
name // "eduardo"
doubleCount // 2
return {
// 一直会是 "eduardo"
name,
// 一直会是 2
doubleCount,
// 这将是响应式的
doubleValue: computed(() => store.doubleCount),
}
},
})
为了从 Store 中提取属性同时保持其响应式，您需要使用storeToRefs()。 它将为任何响应式属性创建 refs。 当您仅使用 store 中的状态但不调用任何操作时，这很有用：
import { storeToRefs } from 'pinia'
export default defineComponent({
setup() {
const store = useStore()
const { name, doubleCount } = storeToRefs(store)
return {
name,
doubleCount
}
},
})
State
访问 state
默认情况下，您可以通过 store 实例访问状态来直接读取和写入状态：
const store = useStore()
store.counter++
重置状态
您可以通过调用 store 上的 $reset() 方法将状态 重置 到其初始值：
const store = useStore()
store.$reset()
改变状态
可通过$patch批量修改状态
store.$patch({
counter: store.counter + 1,
name: 'Abalam',
})
但是，使用这种语法应用某些突变非常困难或代价高昂：任何集合修改（例如，从数组中推送、删除、拼接元素）都需要您创建一个新集合。 正因为如此，$patch 方法也接受一个函数来批量修改集合内部分对象的情况：
cartStore.$patch((state) => {
state.items.push({ name: 'shoes', quantity: 1 })
state.hasChanged = true
})
替换state
您可以通过将其 $state 属性设置为新对象来替换 Store 的整个状态：
store.$state = { counter: 666, name: 'Paimon' }
您还可以通过更改 pinia 实例的 state 来替换应用程序的整个状态。 这在 SSR for hydration 期间使用。
pinia.state.value = {}
Getters
Getter 完全等同于 Store 状态的 计算值。 它们可以用 defineStore() 中的 getters 属性定义。 他们接收“状态”作为第一个参数以鼓励箭头函数的使用：
export const useStore = defineStore('main', {
state: () => ({
counter: 0,
}),
getters: {
doubleCount: (state) => state.counter * 2,
},
})
Actions
Actions 相当于组件中的methods。 它们可以使用 defineStore() 中的 actions 属性定义，并且它们非常适合定义业务逻辑：
export const useStore = defineStore("storeId", {
state: () => {
return {
count: 10
}
},
actions: {
changeCount(val) {
this.count += val;
}
}
})
并在组件中使用
<script>
export default {
setup() {
const store = useStore()
const addClick = () => {
store.changeCount(40);
};
return { store }
}
}
</script>
网友评论