跳到主要内容
版本:4.x

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>