Pinia简单使用

安装：

npm install pinia

创建一个 pinia 实例 (根 store) 并将其传递给应用：

// main.js

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

const pinia = createPinia()
const app = createApp(App)

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

简单创建一个仓库，例如：src\stores\pinia.js

import { defineStore } from 'pinia'

//  `defineStore()` 的返回值的命名是自由的
// 但最好含有 store 的名字，且以 `use` 开头，以 `Store` 结尾。
// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一ID

export const useLayoutStore = defineStore('layout', {
  state: () => ({
    collapse: false,
  }),
  getters: {},
  actions: {
    menuSwitch() {
      this.collapse = !this.collapse
    },
  },
})

组件内使用：

<script setup>
import { useCounterStore } from '@/stores/counter'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()

store.collapse // false
store.menuSwitch()
store.collapse = false // 可以在外界直接进行读写
    
// 可以重置state，如果你使用的是ref方式创建state则没有该方法
store.$reset() 
</script>

更多用法查看State | Pinia