VUE3-Pinia的使用《三》

pinia的官网是简介 | Pinia

它的功能和vuex差不多,但是pinia更加优于vuex。主要用于状态管理,管理全局的变量,也可以存储页面A的值,然后在页面B中直接访问,不分父子组件之间的关系,可以任意传值,非常的灵活。

下面我们做一个简单的案例,在一个页面存储值,刷新当前界面,存储值不会清空

1.使用HBuilder X建立一个程序

2.安装pinia

npm install pinia

输入上面的命令,安装完成后在package文件中,可以看到版本,就成功了。

为了持久化缓存,不会因刷新界面而导致数据清空的问题,需要安装pinia-plugin-persistedstate,很多人没有安装,所以会导致刷新后,没有存储上数据。

npm i pinia-plugin-persistedstate

和上面一样,输入命令进行安装

3.在main.js文件中,分别引用,代码如下

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

import { createPinia } from 'pinia'
import persistedstate from "pinia-plugin-persistedstate"

const pinia = createPinia();
pinia.use(persistedstate);

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

4.建立一个文件夹store,再建立一个PiniaStore.js

代码 

import {
	ref
} from 'vue'
import {
	defineStore
} from 'pinia'

export default defineStore('testStore', () => {

	const info = ref({
		counter: 0, //记录访客次数
		enabled: 0,
		personID: '0',
		username: '0',
		password: '0',
	})

	return {
		info
	}

}, {
	persist: {
		storage: localStorage,
		paths: ['info']
	}
})

5.使用,把HelloWorld.vue中没有用的代码删除,只放有用的代码

首先进行导入,然后进行赋值操作

<template>
	123
</template>

<script setup>
	import useTestStore from "../store/PiniaStore.js"

	const counterStore = useTestStore();
	counterStore.info.username = 'admin'; //个人信息
	counterStore.info.password = '123456';
	counterStore.info.counter++
</script>

<style scoped>

</style>

6.此时,我们打开谷歌浏览器,然后按F12,如果安装了vue devtools,选择VUE即可。

插件安装学习前端记录_故里2130的博客-CSDN博客 

可以看到里面的变量

如果我们刷新界面,counter值自动增加,其他的值,并不会变化,这样其实就成功了。

来源:VUE3-Pinia的使用《三》_故里2130的博客-CSDN博客

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
Vue Pinia 是一个基于 Vue 3 的状态管理库,可以让你更方便地管理应用程序的状态。下面是一个简单的例子,展示如何使用 Vue Pinia: 1. 安装 Vue Pinia ```bash npm install @pinia/vue3 ``` 2. 创建一个 store ```javascript import { defineStore } from '@pinia/vue3' export const useCounterStore = defineStore({ id: 'counter', state: () => ({ count: 0 }), actions: { increment() { this.count++ } } }) ``` 上面的代码创建了一个名为 `useCounterStore` 的 store,用于管理一个名为 `count` 的状态,并且提供了一个名为 `increment` 的 action,用于增加 `count` 的值。 3. 在组件中使用 store ```vue <template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> </div> </template> <script> import { useCounterStore } from './store' export default { setup() { const counterStore = useCounterStore() return { count: counterStore.count, increment: counterStore.increment } } } </script> ``` 在组件中使用 `useCounterStore`,并且将 `count` 和 `increment` 绑定到组件的模板中。 4. 在应用程序中注册 store ```javascript import { createApp } from 'vue' import App from './App.vue' import { createPinia } from '@pinia/vue3' import { useCounterStore } from './store' const app = createApp(App) const pinia = createPinia() pinia.useStore(useCounterStore) app.use(pinia) app.mount('#app') ``` 在应用程序中注册 `useCounterStore`,并将其添加到 `pinia` 实例中。 以上就是使用 Vue Pinia 的一些基本步骤。通过使用 Vue Pinia,你可以轻松地管理应用程序的状态,提高开发效率。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

故里2130

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值