Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。 如果您熟悉 Composition API,您可能会认为您已经可以通过一个简单的 export const state = reactive({})
. 这对于单页应用程序来说是正确的,但如果它是服务器端呈现的,会使您的应用程序暴露于安全漏洞。 但即使在小型单页应用程序中,您也可以从使用 Pinia 中获得很多好处
Pinia特别轻量级,十分简单的编写。将是替换Vuex的工具
首先下载依赖
yarn add pinia
# 或者使用 npm
npm install pinia
在 main.js
中声明
import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'
const store = createPinia()
createApp(App).use(store).mount('#app')
在 src
中新建文件夹 store
并新建 index.js
文件
import { defineStore } from 'pinia'
// 第一个参数是应用程序中 store 的唯一 id
export const useTestStore = defineStore('Test', {// other options...
})
我们在这里定义一个名为useTestStore
的store,接下来声明 state