Vue使用Pinia

🍍 Pinia与Vuex的作用是一样的，用来存储数据，高级一点说就是进行状态管理，适用于vue2和vue3。

➡️ 关于状态管理是什么（官网）：状态管理 | Vue.js

🌟 本文以vue3为例，讲解如何在项目中使用pinia以及pinia的一些相关知识点。

---

目录

1.使用vite创建Vue项目

2.安装pinia

3.将pinia挂载到app

 4.创建store仓库

5.store中除了state的其他属性

---

 

1.使用vite创建Vue项目

名称为vue-pinia ，语言选择TS

npm create vite@latest vue-pinia 

cd vue-pinia

npm install

npm run dev

2.安装pinia

npm install pinia （或 yarn add pinia)

3.将pinia挂载到app

src / mian.ts

 4.创建store仓库

store用来存放数据，可以理解为一个公共组件，只不过该公共组件里只存放数据，这些数据其他所有的组件都可以访问且修改。

（1）src下新建store文件夹，新建test.ts文件

使用 defineStore 创建store

import { defineStore } from 'pinia'

// 第一个参数是应用程序中 store 的唯一 id
// 第二个参数写配置项，比如数据或修改数据的方法
export const useStore = defineStore('main',{
    
});

（2）App.vue中简单使用store

<script setup lang="ts">
import {useStore} from './store/test'
const store = useStore();
console.log(store);
</script>

<template>
  
</template>

<style scoped>

</style>

运行结果： 

 (3)存储数据

test.ts里添加state属性

export const useStore = defineStore('main',{
    // state属性用来存放数据，接收箭头函数返回值，不能直接接受一个对象
    state:()=>{
        return {
            name: "玉子烧",
            num: 30
        }
    }
});

App.vue操作state

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import {useStore} from './store/test'
const store = useStore();

let { name, num } = storeToRefs(store);
// 使用storeToRefs() 为了从 Store 中提取属性同时保持其响应式
console.log(name ,num );
</script>

<template>
 <h1> {{name}}</h1>
  <h2>{{num}}</h2>
</template>

<style scoped>

</style>

(4)多个组件使用数据

创建子组件src/components/child.vue

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import {useStore} from '../store/test'
const store = useStore();

let { name, num } = storeToRefs(store);
// 使用storeToRefs() 为了从 Store 中提取属性同时保持其响应式
console.log(name ,num );
</script>

<template>
    <h3>我是子组件</h3>
    <h1> {{name}}</h1>
    <h2>{{num}}</h2>
</template>

<style scoped>

</style>

app.vue中引入

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import {useStore} from './store/test';
import child from './components/child.vue';
const store = useStore();

let { name, num } = storeToRefs(store);
// 使用storeToRefs() 为了从 Store 中提取属性同时保持其响应式
console.log(name ,num );
</script>

<template>
 <h1> {{name}}</h1>
  <h2>{{num}}</h2>
  <child></child>
</template>

<style scoped>

</style>

 （5）修改state的数据

点击按钮可以看到父子组件的num同时被修改。 

(6)重置state数据

使用store的 $reset可以将刚才对数据做的修改全部还原成初始值 

//重置store
const reset = () => {
  store.$reset()
}


<button @click="reset">重置</button>

 （7）批量更改store数据

刚才的修改只是对单个数据num进行修改，使用store的 $patch可以一次性修改多个数据。

const patchChange = () =>{
  store.$patch({
    name : '薯条',
    num : 22
  })
}


<button @click="patchChange">批量修改</button>

5.store中除了state的其他属性

（1）getterss属性

与计算属性(computed)相似，起的作用一样。里面可以写很多个方法。

  <button @click="patchChange">批量修改</button>

export const useStore = defineStore('main',{
    // state属性用来存放数据，接收箭头函数返回值，不能直接接受一个对象
    state:()=>{
        return {
            name: "玉子烧",
            num: 30
        }
    },
    // 计算属性
    getters:{
        getAddNum:(state) =>{
            return state.num +100;
        }
        // 也可以写成
        // getAddNum(state){
        //     //this 指向 state，所以不要用箭头函数
        //     return this.num +100;
        // }
    }
});

 

（2）action属性

类似于methods，里面可以写一些处理业务逻辑的代码。

actions:{
        // saveName(name:string){
        //     this.name = name;
        // }
        addNum(val:number) {
            this.num += val
        }
    }

  <button @click="store.addNum(2)">+2</button>