vue之pinia存储和读取数据

在Vue中使用Pinia来存储和读取数据，首先需要安装Pinia并在Vue应用中设置。

1. 安装Pinia:

npm install pinia
# 或者
yarn add pinia

2. 设置Pinia并插入到Vue实例中:

// store.js
import { createPinia } from 'pinia'
 
const pinia = createPinia()
 
export default pinia

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { store } from './store'
 
const app = createApp(App)
app.use(store)
app.mount('#app')

3. 创建一个Pinia Store来管理状态:

// stores/counterStore.js
import { defineStore } from 'pinia'
 
export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
  },
})

4. 在组件中使用Pinia Store读取和修改数据:

<template>
  <div>
    <p>{{ counterStore.count }}</p>
    <button @click="counterStore.increment">Increment</button>
  </div>
</template>
 
<script setup>
import { useCounterStore } from './stores/counterStore'
 
const counterStore = useCounterStore()
</script>

以上代码展示了如何在Vue应用中使用Pinia来定义一个简单的状态存储，并在组件中读取和修改这个状态。