Pinia的使用、Pinia的持久化

龙井>_<

已于 2023-06-28 19:13:57 修改

阅读量2.7k

点赞数 4

文章标签：前端前端框架 vue vue.js

于 2023-06-27 10:55:35 首次发布

本文链接：https://blog.csdn.net/m0_64664995/article/details/131410664

版权

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

一.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++;
    }
  }
})

欢迎学习和交流！