vue3+ts + pinia

1.安装

npm i pinia

在main.ts 中导入

// 导入pinia
import { createPinia } from 'pinia'
const pinia = createPinia()
 
// 挂载pinia
createApp(App).use(pinia).mount('#app')

创建pinia仓库 在src下创建stores/goods.ts

import { defineStore } from 'pinia'
export const useGoods = defineStore({
	id: 'goods',
	state: () => ({
		num: 3
	}),
	actions: {
		changeNum(num) {
			this.num += num
		}
	}
})

使用

<template>
<view>
  <uni-row style="position: fixed;left: 0;right: 0;bottom: 0;display: flex;">
    <uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
					@buttonClick="buttonClick" />
   </uni-row>
</view>
</template>
<script setup lang="ts">
	import {storeToRefs}from 'pinia'
	import {useGoods} from '@/stores/goods'
	const goodsStore = useGoods()
	const {num} = storeToRefs(goodsStore)
        
        const buttonClick= (e)=>{
		if(e.index==0){
			goodsStore.changeNum(10)
		}
	}
        
  </script>      

点击加入购物车后数字变化