校园跑腿项目-02-pinia添加使用

1.pinia引入

uniapp创建项目自带pinia和vuex
注意-vue3项目
在main.js中引入

import { createSSRApp } from 'vue'
import { createPinia } from 'pinia'
export function createApp() {
  const app = createSSRApp(App)
	const pinia = createPinia()
	app.use(uviewPlus)
  return {
    app,
	pinia
  }
}

2.新建一个store/counter.js文件

import { defineStore } from 'pinia'

export const counterStore = defineStore('counter', {
    state: () => ({
        count: 0
    }),
    getters: {},
    actions: {
        increment() {
            this.count++
        }
    }
})

3.使用pinia

<view>计数：{{counter.count}}</view>
<button @click="handleAdd">增加</button>

<script setup>
    import { counterStore } from '@/store/counter'

    const counter = counterStore()

    const handleAdd = () => {
        counter.increment()
    }
</script>