Vue3 Pinia
Taro Vue3 支持使用 Pinia 进行状态管理。
安装
$ yarn add pinia
# 或者使用 npm
$ npm install pinia
pinia@2.0.22 已经解决了这个问题(#967), 所以你可能不再需要这个插件
例子
- 运行
taro init
命令时选择 Vue3 -> pinia 即可创建 vue3-pinia 模板项目 - Todo App
使用
创建 Pinia 实例
src/app.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
const App = createApp({})
App.use(createPinia())
export default App
创建 store
在项目中新建 src/store/index.js
文件用来配置 store
:
src/store/index.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => {
return { count: 0 }
},
actions: {
increment() {
this.count++
},
},
})
使用 store 定义的数据与方法
<template>
<view>
<text>{{ counter.count }}</text>
<view @tap="onAdd">ADD</view>
</view>
</template>
<script>
import { useCounterStore } from '../stores'
export default {
setup() {
const counter = useCounterStore()
const onAdd = () => {
counter.count++
}
return {
counter,
onAdd,
}
},
}
</script>