Vue3 之pinia状态管理

一、文档

https://pinia.vuejs.org/zh/introduction.html

二、简单使用

main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
const app = createApp(App)
app.use(router)
app.use(createPinia())
app.mount('#app')

store

import {defineStore} from 'pinia'
const useCountStore = defineStore('counter', {state: ()=>{return {count: 0}},getters: {getCount(state){return state.count}},actions: {add(){this.count++}}
})export default useCountStore

vue

<script setup>
import { ref, computed } from 'vue'
import useCountStore from '../store';
import { storeToRefs } from 'pinia';const store = useCountStore()
const msg = ref('vue')// const count = computed(() => {
//   return store.count
// })

const { count } = storeToRefs(store)const add = () => {store.add()console.log(store.getCount)
}
</script><template><h1>{{ msg }}</h1><div class="card"><button type="button" @click="add()">count is {{ count }}</button></div>
</template><style scoped></style>