vue3中pinia的使用及持久化(详细解释)

发布时间:2023年12月31日

解释一下pinia:

Pinia是一个基于Vue3的状态管理库,它提供了类似Vuex的功能,但是更加轻量化和简单易用。Pinia的核心思想是将所有状态存储在单个store中,并且将store的行为和数据暴露为可响应的API。从而实现数据在各个组件之间的共享;

1、新建一个vue3项目,并导入pinia的依赖:

npm install pinia

2、在main.ts中引入pinia:

import './assets/main.css'

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

const app = createApp(App)

const pinia = createPinia()
app.use(pinia)
app.use(router)

app.mount('#app')

3、在src目录下,新建一个stores文件夹。我们在这个文件夹中进行pinia的使用;

新建一个counter.ts文件,在这个文件中定义一个变量count,使这个count变量能被所有的组件共享,并修改其值;

countrt.ts的代码如下:

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

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)

  return { count}
})

解释一下:

defineStore :是pinia使用中必须要引入的一个函数,它是用于定义一个新的store的函数。

在Pinia中,每个store都需要使用defineStore函数进行定义,并传入一个配置对象来描述store的行为和数据。

defineStore 一般要传递两个参数,第一个是store函数的名称,一般这个名称要做到见名知义、第二个是这个store函数的具体逻辑。

可以在这里面定义属性、方法等。但是这些定义过的属性和方法一定要通过return交出去才行

如上图,我们顶一个一个count变量,并通过return返回了出去。那么现在就可以在任意组件中查看count的值,并进行修改了。

4、使用pinia:

要在组件中使用pinia定义的store函数,第一步是要先引入store:


import { useCounterStore } from '@/stores/counter';

第二步,定义一个参数来接收这个useCounterStore函数:

const counterStore = useCounterStore();

第三步,直接在需要的位置引入counterStore中的参数即可

(可以是属性,也可以是方法。但是有一点要注意,就是必须要是return交出去的才可以;)

从pinia中取到的数据{{ counterStore.count }}

启动vue3项目,查看

可以看到确实能获取到pinia中定义的数据count;

如果想要修改count,可以直接在数值上修改:
?

const addCount = () => {

counterStore.count++;

}

定义一个按钮,并绑定事件:修改结果如图:

这个修改是全局的,你在另一个组件中也可以观察到pinia中数据的变化:

但是pinia有一个不好的地方就是它默认是内存存储,你只要一刷新浏览器就会丢失数据。

我们这时候可以借助pinia的持久化插件persist来解决;

1、下载persist持久化插件:

npm install pinia-plugin-persistedstate

2、在pinia中使用persist

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
// 1、pinia的持久化插件
import { createPersistedState } from 'pinia-plugin-persistedstate'

const app = createApp(App)

//2、 接收createPersistedState函数
const piniaPersistedState = createPersistedState()

const pinia = createPinia()
// 3、在pinia中引入持久化插件
pinia.use(piniaPersistedState)

app.use(pinia)
app.use(router)

app.mount('#app')

3、在定义状态store的时候指定持久化配置参数:{persist:true}

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

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)

  return { count}
},
{persist: true}

)

引入了pinia的持久化插件之后,我们再刷新页面,那么piniade的store函数中的数据也就持久的保存了。

其实这个插件底层也是使用了localstorage,将数据存储到了浏览器中。

文章来源:https://blog.csdn.net/2301_78646673/article/details/135315509
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。