【玩转全栈】---- Pinia 组件状态管理器

目录

Pinia 介绍

基本配置

创建Pinia

使用 Pinia

Pinia 三大方法

state

getters

action

Pinia 介绍

        Pinia 是一个用于 Vue 3 的状态管理库，旨在提供更加简洁、直观且灵活的状态管理模式。它由 Vue 官方团队成员开发，以其轻量级和高性能著称。Pinia 支持 Vue 3 的组合式 API，并允许开发者以一种更自然的方式组织和共享应用状态。与 Vuex 不同，Pinia 去除了复杂的概念如模块嵌套，转而采用扁平化的 store 结构，使得代码更加清晰易懂。此外，Pinia 还支持 TypeScript，提供了优秀的类型推断能力，增强了开发体验。通过 Pinia，你可以轻松地创建多个独立的 store 模块，每个模块都可以拥有自己的 state（状态）、getters（计算属性）、actions（方法）等，极大地简化了复杂应用中的状态管理。其灵活性还体现在对插件系统的良好支持，可以方便地扩展功能。总的来说，Pinia 是现代 Vue 应用中进行状态管理的理想选择。

中文文档：

简介 | Pinia

Pinia 使用参考：

Pinia使用state、getters、actions_WEB前端_前端课程_前端学习路线_小鹿线

Pinia-counter基础使用_哔哩哔哩_bilibili

基本配置

下载 Pinia(基于vue3)，终端输入下载命令：

cnpm install pinia

配置 pinia ，打开 main.js ，先引入 pinia：import { createPinia } from 'pinia'，创建 pinia ：const pinia = createPinia()  ，应用 pinia：app.use(pinia)，完整配置代码：

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

创建Pinia

我这里基于 vue3 组合式 API 编写，这要方便得多：

import { defineStore } from 'pinia'
import {ref} from 'vue'

export const useAlertsStore = defineStore('storePinia', ()=>{
  const money = ref(0)
  function addMoney(){
    money.value++
  }
  return {money,addMoney}
})

可以看到，里面的属性、方法的定义和 vue3 中组件中一样，这里的 useAlrtsStore 是store名称，可供其他组件调用 store时使用，storePinia 是一个名字，后面的回调函数用于编写需要共享的数据，别忘了进行返回。

使用 Pinia

在组件中引入刚才创建的 useAlertsStore  ，注意，如果你用的命名导出（即向我示例那样 export const useAlertsStore），组件引人需要加大括号：

import { useAlertsStore } from './store/counter.js';

而如果是默认导出，类似于这样：

const counter = {
    increment: () => { /* ... */ },
    decrement: () => { /* ... */ }
};

export default counter;

则无需加大括号。

引入后创建一个状态管理 store 实例：

const store = useAlertsStore();

将 store 当作正常实例化对象使用即可：

<span>我现在有{{ store.money }}元</span>
<button @click="store.addMoney"></button>

Pinia 三大方法

state

写法稍有不同：

export const useAlertsStore = defineStore('storePinia', {
  state:()=>{
    return{
      money:0,
      name:"谭",
      isMan:true,
      items:[]
    };
  },
  actions:{
    addMoney(){
      this.money ++;
    }
  }
})

actions 中定义的方法。

如果想要页面数据重置的话，可以通过 .$reset() 方法实现：

<button @click="store.$reset">重置</button>

当然，也不是只能在 counter.js 中编写函数，也可以在外部组件中添加方法，通过 $reset() ，将方法更新到 counter.js 中：

<button @click="store.$patch({money:100})">修改money</button>

当然，此方法不是修改整个对象，而是仅仅修改对象中相对应的属性，当你点击该按钮时，其他属性并不会变化。

getters

getters 相当于 Computed 计算方法：

counter.js:

export const useAlertsStore = defineStore('storePinia', {
  state:()=>{
    return{
      money:0,
      name:"谭",
      isMan:true,
      items:[]
    };
  },
  actions:{
    addMoney(){
      this.money ++;
    }
  },
  getters:{
    doubleMoney:(state)=>state.money * 2,
    doblePlusOne(){
      return this.doubleMoney + 1;
    }
  }
})

App.vue：

<template>
  <span>我现在有{{ store.money }}元</span>
  <button @click="store.addMoney">+</button>
  <button @click="store.$reset">重置</button>
  <span>getters数据:{{ store.doubleMoney }}元</span>
  <span>getters加1:{{ store.doblePlusOne }}元</span>
  <button @click="store.$patch({money:100})">修改money</button>
  <div id="cesiumContainer"></div>
</template>

当点击按钮，Getters 中的对应函数会执行，得到计算过的数据。

actions

actions 非常简单，就相当于定义函数的地方。

当然，以上写法是基于选项式 API 的写法，还是比较繁琐的，使用组合式 API 代码如下：

export const useAlertsStore = defineStore('storePinia', ()=>{
  const money = ref(0);
  const name = "谭";
  const isMan = true;
  const items = [];
  function addMoney(){
    money.value++
  }
  const doubleMoney = computed(()=>{
    return money.value * 2;
  });
  const doblePlusOne = computed(()=>{
    return this.doubleMoney + 1;
  });

  return {money,addMoney}
})

这将简洁得多。

感谢观看！！！