位置：首页-资讯-前端开发

带你熟练掌握Vue3之Pinia状态管理

2022-11-13 19:28

短信预约 -IT技能 免费直播动态提醒

一、概念

1. Pinia => Pinia

Pinia（发音为/piːnjʌ/，如英语中的“peenya”）是最接近piña（西班牙语中的菠萝）的词

Pinia开始于大概2019年，最初是作为一个实验为Vue重新设计状态管理，让它用起来像组合式API（Composition API）
从那时到现在，最初的设计原则依然是相同的，并且目前同时兼容Vue2、Vue3，也并不要求你使用Composition API
Pinia本质上依然是一个状态管理的库，用于跨组件、页面进行状态共享（这点和Vuex、Redux一样）

2. Pinia和Vuex的对比

01 - 不是已经有Vuex了吗？为什么还要用Pinia

Pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子，结合了 Vuex 5 核心团队讨论中的许多想法
最终，团队意识到Pinia已经实现了Vuex5中大部分内容，所以最终决定用Pinia来替代Vuex
与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的仪式，提供了 Composition-API 风格的 API
最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持

02 - 和Vuex相比，Pinia有很多的优势

mutations 不再存在
- 他们经常被认为是非常冗长
- 他们最初带来了 devtools 集成，但这不再是问题
更友好的TypeScript支持，Vuex之前对TS的支持很不友好
不再有modules的嵌套结构
- 可以灵活使用每一个store，它们是通过扁平化的方式来相互使用的
也不再有命名空间的概念，不需要记住它们的复杂关系
Pinia的store中的 getters、actions 可以使用this，this代表当前sotre对象

二、使用Pinia

1. 安装

npm install pinia

2. 创建Pinia

创建stores文件夹，并在其中创建个index.js

// 1. 导入
import { createPinia } from 'pinia';
 
// 2. 创建
const pinia = createPinia();
 
// 3. 导出
export default pinia;

3. 在main.js中引入

import { createApp } from 'vue';
import App from './App.vue';
// 1. 导入
import pinia from './stores';
// 2. use一下
createApp(App).use(pinia).mount('#app');

三、Store

1. 概念

Store :

一个 Store （如 Pinia）是一个实体，它会持有为绑定到你组件树的状态和业务逻辑，也就是保存了全局的状态
它有点像始终存在，并且每个人都可以读取和写入的组件
你可以在你的应用程序中定义任意数量的Store来管理你的状态

Store有三个核心概念 :

state、getters、actions
等同于组件的data、computed、methods
一旦 store 被实例化，可以直接在 store 上面访问 state、getters 和 actions 中定义的任何属性

2. 创建

定义一个Store :

Store 是使用 defineStore() 定义
并且它需要一个唯一名称，作为第一个参数传递

在stores文件夹创建 counter.js 文件

// 1, 导入
import { defineStore } from 'pinia';
// 2. 创建一个store

const userCounterStore = defineStore('counterStore', {
  state: () => ({
    count: 66
  })
});
 
export default userCounterStore;

3. 使用

<template>
  <div class="app">App 页面</div>
  <h2>1. counterStore : {{ counterStore.count }}</h2>
  <h2>2. toRefs : {{ aCount }}</h2>
  <h2>3. storeToRefs : {{ bCount }}</h2>
 
  <button @click="changCount">改变count</button>
</template>
 
<script setup>
import { toRefs } from 'vue';
import { storeToRefs } from 'pinia';
// 1. 导入该函数
import userCounterStore from '@/stores/module/counter';
 
// 2. 调用，获得store
const counterStore = userCounterStore();
 
// 3. 拿到state值

// toRefs
const { count: aCount } = toRefs(counterStore);
// storeToRefs
const { count: bCount } = storeToRefs(counterStore);
 
// 监听点击
const changCount = () => {
  // 可以直接操作！！！
  counterStore.count++;
};
</script>

4. 效果

四、核心概念State

1. 定义State

// 1, 导入
import { defineStore } from 'pinia';
// 2. 创建一个store

const userCounterStore = defineStore('counterStore', {
  state: () => ({
    count: 66,
    name: 'coder',
    age: 19
  })
});
 
export default userCounterStore;

2. 读取写入State

默认情况下，可以通过 store 实例访问状态来直接读取和写入状态

<script setup>
import Home from './views/Home.vue';
// 1. 导入该函数
import { toRefs } from 'vue';
import { storeToRefs } from 'pinia';
import userCounterStore from '@/stores/module/counter';
 
// 2. 调用，获得store
const counterStore = userCounterStore();
// 3. 拿到state值
const { count } = storeToRefs(counterStore);
 
// 监听点击
const changCount = () => {
  // 1. 读取
  console.log(counterStore.count);
  // 2. 写入
  counterStore.count++;
};
</script>

3. 重置State

可以通过调用 store 上的 $reset() 方法将状态重置到其初始值

// 重置
const resetState = () => {
  // 回到初始值
  counterStore.$reset();
};

4. 改变State

除了直接用 store.counter++ 修改 store，还可以调用 $patch 方法
允许同时应用多个更改

// 监听点击
const changCount = () => {
  // 一起更改数据
  counterStore.$patch({
    count: 99,
    name: 'star',
    // 如果输入新增的属性，没有用哒！
    buy: ref('abvc')
  });
  console.log(counterStore);
};

5. 替换State

可以通过将其 $state 属性设置为新对象来替换 Store 的整个状态

五、核心概念Getters

1. 基本使用

代码

const userCounterStore = defineStore('counterStore', {
  state: () => ({
    count: 66,
    name: 'coder',
    age: 19
  }),
  getters: {
    // 1. 定义getterts
    doubleCount(state) {
      // 2. 通过state参数拿到count
      console.log(state.count);
      // 3. 通过this拿到参数
      console.log(this.count);
    }
  }
});

使用

<template>
  <div>home</div>
  <h2>count : {{ counterStore.count }}</h2>
  <hr />
  <h2>count : {{ counterStore.doubleCount }}</h2>
 
  <button @click="changCount">改变count</button>
</template>
 
<script setup>
import { toRefs } from 'vue';
import userCounterStore from '@/stores/module/counter';
// 1. 获取store
const counterStore = userCounterStore();
// 2. 解构，变成响应式
const { doubleCount } = toRefs(counterStore);
console.log(doubleCount);
 
// 监听点击
const changCount = () => {
  // 3. 改变store
  counterStore.count++;
  // 4. 输出
  console.log(doubleCount.value);
};
</script>

2. 在getter中使用其他的getter

getters: {
  doubleCount(state) {
    return this.count * 2;
  },
  othersGetter() {
    // 通过this来拿
    return this.doubleCount;
  }
}

3. getters支持返回一个函数

可以用来传递参数到getters

代码

getters: {
  doubleCount(state) {
    return this.count * 2;
  },
  formatName() {
    // 返回一个函数，可以传递参数进来
    return (lastName) => {
      return this.name + lastName;
    };
  }
}

使用

<template>
  <h2>{{ counterStore.formatName('123') }}</h2>
  <button @click="changCount">改变count</button>
</template>
 
<script setup>
import { toRefs } from 'vue';
import userCounterStore from '@/stores/module/counter';
// 1. 获取store
const counterStore = userCounterStore();
// 2. 解构，变成响应式
const { formatName } = toRefs(counterStore);
 
const changCount = () => {
  // 3. 使用函数
  console.log(formatName.value('444'));
  // 也可以直接使用，看情况而定
  counterStore.formatName('123')
};
</script>

4. getters使用别的store中的数据

导入其他的store，使用即可，很方便

userOtherStore(){
  // 1. 导入其他soter
  const otherStore = userOtherStore()
  // 2. 拿到数据 ....
  otherStore.getters()
}

六、核心概念Actions

actions => 非常适合定义业务逻辑

1. 基本使用

代码

const userCounterStore = defineStore('counterStore', {
  state: () => ({
    count: 66,
    name: 'coder',
    age: 19
  }),
  actions: {
    increment() {
      this.count++;
    },
    // 这里的参数指调用时传递过来的参数
    incrementNum(num) {
      this.count += num;
    }
  }
});

使用

<script setup>
import userCounterStore from '@/stores/module/counter';
// 1. 获取store
const counterStore = userCounterStore();
// 2. 解构
const { increment, incrementNum } = counterStore;
// 3. 调用
increment();
incrementNum(33);
</script>

2. 异步操作

代码

const userCounterStore = defineStore('counterStore', {
  state: () => ({
    arrList: []
  }),
  actions: {
    async fetchDataList() {
      // 1. 请求
      const res = await fetch('http:xxxxx');
      const data = await res.json();
      this.arrList = data.list;
      // 2. 返回值，相当于 return Promise.resolve(data)
      return data;
    }
  }
});

使用

<script setup>
import userCounterStore from '@/stores/module/counter';
// 1. 获取store
const counterStore = userCounterStore();
// 2. 解构
const { fetchDataList } = counterStore;
// 3. 调用
fetchDataList().then((res) => {
  // 因为返回的时promise，所以可以在then中拿到数据
  console.log(res);
});
</script>