Pinia使用

最新推荐文章于 2024-07-30 16:02:17 发布

Wan8017

最新推荐文章于 2024-07-30 16:02:17 发布

阅读量444

点赞数 13

文章标签： vue

本文链接：https://blog.csdn.net/m0_64107427/article/details/136366934

版权

本文介绍了如何在Vue.js3应用中使用Pinia进行状态管理，并通过pinia-plugin-persistedstate插件实现状态的本地持久化。教程包括安装、创建store、配置存储和在main.ts中引入Pinia组件的步骤。

摘要由CSDN通过智能技术生成

官方地址：Pinia | The intuitive store for Vue.js (vuejs.org)https://pinia.vuejs.org/

1.安装

npm install pinia   
npm install pinia-plugin-persistedstate

Pinia是一个基于Vue 3的状态管理库，它使得管理Vue的全局状态变得更加容易和直观。

而pinia-plugin-persistedstate是 Pinia 的官方插件之一，它提供了一种将 Pinia 状态持久化到本地存储的方式，以确保状态数据在刷新或关闭页面后仍然存在。

换句话说，Pinia是用于管理Vue 3应用程序的状态管理库，而pinia-plugin-persistedstate是为Pinia提供的一个插件，它允许您将Vue应用程序中的状态保存到本地存储中，以便在下一次访问应用程序时恢复状态。

2.新建store/pinia.ts

//引入pina
import { createPinia,defineStore } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia

 const wmsStore = defineStore('wmsStore', {
  state: () => {
    return {
      name: '游客',
      isMenuCollapse:false
    }
  },
  persist: {
    key: 'wms-store',
    storage: localStorage,
  },
})

export  {wmsStore}

3.在main.ts文件引入pina组件

//引入pina
import pinia from '@/store/pinia'




const app = createApp(App)

app.use(pinia)

4. 使用变量

 import  { wmsStore } from '@/store/pinia'
 const wmsstore = wmsStore()
onMounted(()=>{
  console.log(wmsstore.name);  //没有下面的重新赋值，依旧是游客

  wmsstore.name = "张三" //加入这句代码两次的打印都是张三
 
  console.log(wmsstore.name);

 })