type
status
date
slug
summary
tags
category
icon
password
Pinia—优雅的setup写法
1.安装
2.挂载全局实例
3.创建一个实例化仓库store
在
src/store/counterStore.js 新建你的 store 。定义store模式有2种：options API模式
使用options API模式定义，这种方式和vue2的组件模型形式类似，也是对vue2技术栈开发者较为友好的编程模式。
使用
state getters actions 格式定义参数setup模式
使用setup模式，更符合vue3 setup的编程模式，使结构扁平化，个人更喜欢这种模式
上面2种定义方式效果都是一样的，我们用
defineStore 方法定义一个store，里面分别定义1个 count 的state，1个 increment action 和1个 doubleCount 的getters。其中state是要共享的全局状态，而action则是让业务方调用来改变state的入口，getters是获取state的计算结果。对应到setup模式，其实state就是ref变量，getter是computed计算属性，actions是method方法之所以用第一种方式定义是还要额外写
getters、action关键字来区分，是因为在options API模式下可以通过 mapState() 、mapActions() 等方法获取对应项；但第二种方式就可以直接获取了。4.业务组件中调用
在
src/compoents/test.vue 下创建个组件- Pinia在setup模式下的调用机制是先install再调用。
- install这样写：
const counterStore = useCounterStoreForSetup();，其中useCounterStoreForSetup就是你定义store的变量；
- 调用就直接用
counterStore .xxx（xxx包括：state、getters、action）就好。
- 代码中获取state是用了解构赋值，为了保持state的响应式特性，需要用
storeToRefs进行包裹。
5.良好的编程习惯
state的改变交给action去处理： 上面例子，
counterStoreForSetup有个pinia实例属性叫$state是可以直接改变state的值，但不建议怎么做。一是难维护；二是破坏store封装，难以移植到其他地方。用hook代替pinia实例属性： install后的
counterStoreForSetup对象里面，带有不少$开头的方法，其实这些方法大多数都能通过hook引入代替。Relate Posts