Pinia的使用、Pinia的持久化

什么是Pinia: Pinia 是 Vue 的存储库,它允许跨组件/页面共享状态。pinia是Vuex的升级版

目录

什么是Pinia: Pinia 是 Vue 的存储库,它允许跨组件/页面共享状态。pinia是Vuex的升级版

一.Pinia的使用 

1.在项目中安装Pinia 

2.引入使用

3.Pinia模块创建

4.在页面中使用 

5.pinia修改state数据的方法:

1.修改 store对象的数据:

2.$patch传递一个对象来修改

3. $patch传递一个函数来修改:

4. actions里修改:

二. Pinia持久化


一.Pinia的使用 

1.在项目中安装Pinia 

# 使用 yarn
yarn add pinia
# 使用 npm
npm install pinia

2.引入使用

vue3引入写法:

# main.js或main.ts 

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia';
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.mount('#app')

vue2引入写法:

# main.js或main.ts 

import { createPinia } from 'pinia'
const pinia = createPinia();
new Vue({
  el: '#app',
  // ...
  // 同一个 `pinia` 实例可以在多个 Vue 应用程序中使用
  pinia,
})

3.Pinia模块创建

在vue项目中,我们常常在 src 目录中新建一个名为 stores 的文件夹,用来管理Pinia模块。

我们可以在这个文件夹里创建多个js或ts文件作为模块

# src/stores/index.js 

// 使用前先引入 defineStore;
import { defineStore } from 'pinia';
// 我们可以使用es6 的模块化规范进行导出

// defineStore 方法有两个参数,第一个参数是模块化名字(相当于ID,不能重复)

// 第二个参数是选项
export const useStore = defineStore('main', {
  state(){  // 存放模块的变量
    return {
      count: 10
    }
  },
  getters:{ // 相当于vue的计算属性,可以缓存数据

  },
  actions:{ // 可以通过actions 方法,改变 state 里面的值。
      
  }
})

4.在页面中使用 

<template>
  <div>
    <p>{{store.count}}</p>
  </div>
</template>
<script>
// 引入 useStore;
import { useStore } from '../store/index.js'
export default {
  setup(props) {
   // useStore 是一个方法,调用之后返回一个对象。
    const store = useStore();
    return {
      store
    }
  }
}
</script>

其它写法: 

<template>
  <div>
    <p>{{count}}</p>
  </div>
</template>
<script>
import { useStore } from '../store/index.js'
import { storeToRefs } from 'pinia';
export default {
  setup(props) {
    const store = useStore();
    return {
      ...storeToRefs(store)
    }
  }
}
</script>

5.pinia修改state数据的方法:

1.修改 store对象的数据:
// html 代码
<p>{{count}}</p>
<button @click="add">累加</button>
// js 代码
const store = useStore();
const add = () => {
       store.count ++ 
}
2.$patch传递一个对象来修改
// html 代码
<p>{{count}}</p>
<button @click="add">累加</button>
// js 代码
const store = useStore();
const add = () => {
      store.$patch({
        count: store.count + 1
      })
}

可以同时修改多个数据:

// html 代码
 <p>我是count数据{{count}}</p>
 <p>num{{num}}</p>
 <button @click="add">累加</button>

// js 代码
const store = useStore();
const add = () => {
      store.$patch({
        count: store.count + 1,
        num: store.num + 1
      })
}

3. $patch传递一个函数来修改:
// html 代码
 <p>count数据:{{count}}</p>
 <p>num{{num}}</p>
 <button @click="add">累计</button>

// js 代码
const store = useStore();
const add = () => {
      store.$patch(state => {
         state.count++;
         state.num++;
      })
}
4. actions里修改:
// 在 actions 里面定义一个方法
import { defineStore } from 'pinia';
export const useStore = defineStore('main', {
  state(){
    return {
      count: 10,
      num: 20
    }
  },
  getters:{

  },
  
  actions:{
    piniaAdd(){ 
       this.count++;
       // 注意:如果使用箭头函数,this 指向就会发生改变,不能再使用 this.count++ 了
    }
  }
})

// 页面
// html 代码
 <p>我是count数据{{count}}</p>
 <p>num{{num}}</p>
 <button @click="add">累计</button>
// js代码
const store = useStore();
const add = () => {
      store.piniaAdd();
}

二. Pinia持久化

安装持久化插件:

// 使用 npm 安装
npm i pinia-plugin-persist --save --include=dev
// 使用 yarn 安装
yarn add pinia-plugin-persist

引入持久化插件:

import { createApp } from 'vue'

import App from './App.vue'

import { createPinia } from 'pinia';
// 下面是持久化插件。
import piniaPersist from 'pinia-plugin-persist'

const app = createApp(App);

const pinia = createPinia();

pinia.use(piniaPersist);

// 注意:是 pinia.use 不能写成 app.use

app.use(pinia);

app.mount('#app')

在模块中使用:

import { defineStore } from 'pinia';
export const useStore = defineStore('main', {
  state(){
    return {
      count: 10,
      num: 20
    }
  },
  persist: { //  持久化插件
    enabled: true, // 使用存储
     strategies: [ // 此属性选写
      //在不写的情况下,默认存储到 sessionStorage 里,默认存储 state 里的所有数据。
      { storage: localStorage, paths: ["count"] },
      // paths 是一个数组,如果写了 就会只存储 count 变量,可以写多个。
    ]
  },
  getters:{

  },
  
  actions:{
    piniaAdd(){
       this.count++;
    }
  }
})

欢迎学习和交流! 

  • 4
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Pinia 是一个用于 Vue.js 的状态管理库,它提供了一种简单且可扩展的方式来管理应用程序的状态。Pinia-plugin-persistedstate 是一个 Pinia 插件,它可以帮助你将应用程序的状态持久化到本地存储中,以便在刷新页面或重新加载应用程序时保持状态的一致性。 使用 pinia-plugin-persistedstate 插件进行持久化的步骤如下: 1. 安装插件: 你可以使用 npm 或者 yarn 来安装插件: ``` npm install pinia-plugin-persistedstate ``` 或者 ``` yarn add pinia-plugin-persistedstate ``` 2. 导入插件并注册: 在你的应用程序的入口文件中,导入 `pinia-plugin-persistedstate` 并将其注册到 Pinia 实例中: ```javascript import { createApp } from 'vue' import { createPinia } from 'pinia' import { createPersistedState } from 'pinia-plugin-persistedstate' const pinia = createPinia() pinia.use(createPersistedState()) const app = createApp(App) app.use(pinia) app.mount('#app') ``` 3. 配置插件: 你可以通过传递选项对象来配置插件,例如指定要持久化的状态模块、存储键名等: ```javascript pinia.use(createPersistedState({ key: 'my-app-state', // 存储键名,默认为 'pinia-state' paths: ['counter'], // 要持久化的状态模块,默认为全部模块 storage: localStorage // 存储引擎,默认为 localStorage })) ``` 4. 使用持久化的状态: 在你的组件中,你可以像使用普通的 Pinia 状态一样使用持久化的状态: ```javascript import { useStore } from 'pinia' export default { setup() { const store = useStore() // 读取持久化的状态 console.log(store.counter) // 修改持久化的状态 store.counter++ } } ``` 这样,你就可以使用 pinia-plugin-persistedstate 插件来实现 Pinia 状态的持久化了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值