Loading... ## 前言 讲真的，```vuex-module-decorators``` 就我个人来说，是真的不喜欢用，但是有无可奈何，相较于这样繁琐的流程，我更推荐使用 ```pinia```，他相较于 vuex 也更轻量更简单 ## 官方介绍 pinia在2019年11月开始时候是一个实验项目，目的就是重新设计一个与组合API匹配的vue状态存储。基本原则和原来还是一样的，pinia同时支持vue2和vue3，比不要求你必须使用组合API。不管是使用vue2或者vue3，pinia的API是相同的，文档是基于vue3写的，同时在需要的地方也标注了vue2的用法，所以不管你是使用vue2还是vue3开发，都能够通过这个文档来学习。 **为什么应该使用pinia？** pinia是一个vue的状态存储库，你可以使用它来存储、共享一些跨组件或者页面的数据。如果你对组合API很熟，你也许会想到你可以使用组合API来做一个简单的全局共享状态存储，像这样 ```js export const state = reactive({}) ``` **pinia的优点** - 符合直觉，易于学习 - 极轻， 仅有 1 KB - 模块化设计，便于拆分状态 - Pinia 没有 mutations，统一在 actions 中操作 state，通过this.xx 访问相应状态虽然可以直接操作 Store，但还是推荐在 actions 中操作，保证状态不被意外改变 - store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或 MapAction 辅助函数，这在 Vuex 中很常见 - 支持多个Store - 支持 Vue devtools、SSR 和 webpack 代码拆分 ## 使用 ### 下载并引入 ```ts import { defineStore } from 'pinia' ``` ### 构建 ```ts export const useMainStore = defineStore('main', { state: () => { return { num: 1 } }, actions: { chang (nums:number) { this.$patch(state => { state.num += nums }) } }, getters: { gt ():number { return this.num + 120 } } }) ``` ### 在 vue 组件中使用 ```js import { storeToRefs } from 'pinia' import { useMainStore } from '@/store/index' const mainStore = useMainStore() // 使用state，建议用 storeToRefs 将状态都解构出来 const { num } = storeToRefs(mainStore) // 单值修改 num.value++ // 多值修改 mainStore.$patch({ num: num.value + 2 }) // 使用方法 mainStore.chang(10) ``` ## 最后 ```pinia``` 真的太简单了，根本就没什么好说的，一眼就懂了 但请注意，```pinia``` 是模块化的 , ```defineStore('main',{})``` 中第一项就是这个 ```pinia``` 模块的名字 因为是模块化所以 ```state``` 必须是函数返回值形式，可以参考 vue 组件的data 最后修改：2022 年 12 月 07 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏