vue3+ pinia 的初实用

固定不变的 : stores/index.js

import { createPinia } from "pinia"

const pinia = createPinia()

export default pinia

main.js


import { createApp } from 'vue'
import App from './App.vue'
import pinia from './stores'

createApp(App).use(pinia).mount('#app')

定义 : stores/counter.js


import { defineStore } from "pinia";

// 定义关于counter的store
// 参数1 : 这个store的id 
// 参数2 : 对象 => 存数据
// 会返回一个函数 : 命名为 use+id
const useCounter  =  defineStore("counter",{
    state:()=>({
        count:99
    }),
    getters:{

    },
    action:{

    }
})

export default useCounter

使用

<template>
  <div class="id">
    count : {{ counterStore.count }}
  </div>
</template>

<script setup>
import useCounter from './stores/counter';
const counterStore = useCounter()


</script>

<style>

</style>