Vue3.0+vite (5) 之 Pinia

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值