vue3 pinia 的基本用法

‌Pinia 是 Vue3 的状态管理器，用于跨组件或页面共享状态。以下是使用 Pinia 的基本步骤：

‌安装 Pinia‌：首先，你需要在项目中安装 Pinia。你可以使用 npm 或 yarn 进行安装。

例如，使用npm，你可以运行 npm install pinia 命令来安装 Pinia。

‌创建 Store‌：在 Vue3 中，你可以使用 Pinia 来管理应用的状态。创建一个 Store 通常涉及定义状态（state）、获取器（getters）、动作（actions）。

1.创建一个名为 store/index.js 的文件，使用 defineStore 函数来定义一个Store：

import { defineStore } from 'pinia'

export const useStore = defineStore('main', () => {
  const searchValue = ref('')
  const count = ref(0)

  function onSearchValue() {
    console.log(searchValue, '这里是store')
  }

  return { searchValue, onSearchValue }
})

2.在 main.js 或 main.ts 文件中，导入 createApp 和 createPinia ，并将Pinia插件应用到 Vue 应用中：

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

const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.mount('#app')

3. 在组件中使用 Store‌：在你的 Vue 组件中，你可以通过 useStore 来获取 Store 的实例，并使用其中的状态和方法。例如，在组件的 setup 函数中：

import { useStore } from '@/store/index'

export default defineComponent({
  setup() {
    const store = useStore()
    // 现在你可以使用store中的状态和方法了，例如 store.searchValue 或 store.onSearchValue()
  }
})

4.使用 storeToRefs：如果你需要在模板中直接访问 Store 的状态，可以使用 storeToRefs 函数来解构 Store 的状态，并将其转换为响应式的引用：

import { storeToRefs } from 'pinia'
// ... 在 setup 函数中使用 storeToRefs 来解构状态 ...