Vue3中使用Pinia

Vue2 中使用Vuex进行状态管理，在Vue3中，引入了Pinia，如果使用Vue3的脚手架搭建项目，其中包含了简单的示例：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    counter: 0
  }),
  getters: {
    doubleCount: (state) => state.counter * 2
  },
  actions: {
    increment() {
      this.counter++
    }
  }
})

这个示例可以在组件中直接使用，在script setup中引入定义：

import { useCounterStore } from '@/stores/counter'

然后初始化一个实例：

const store = useCounterStore()

在模板中就可以调用这个实例了：

   {{ store.counter }}
      {{ store.doubleCount }}
   <button @click="store.increment()">加一</button>

其中保存的状态是全局的，如果创建另一个实例，会发现，获取的数据是一样的：

const store = useCounterStore()
const store1 = useCounterStore()

在其它组件中获取的数据也是一样的。
最后说明一下，使用pinia需要在vue项目的入口进行声明和注册：

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')