Pinia简介

Pinia，起始于2019年11月左右的一个实验项目，是Vue.js的新一代状态管理器。它旨在设计一个拥有组合式API的Vue状态管理库，并倾向于同时支持Vue 2和Vue 3。在设计理念上，Pinia删除了mutations，不再支持与vuex混用，但支持插件扩展功能以及模块热更新。

作为一个Vue存储库，Pinia允许跨组件或页面共享状态。实际上，可以把Pinia看作是Vuex的升级版。Store(如Pinia)是一个承载全局状态的实体，每个组件都可以读取和写入它。因此，无论是显示在导航栏中的用户信息，还是需要通过页面保存的数据（例如一个非常复杂的多步骤表单），都可以存放在Pinia中。

Pinia的用法非常简单，以下是一些基本步骤：

1. 安装Pinia: 使用npm或yarn安装Pinia。

npm install pinia@next --save
# OR with yarn
yarn add pinia@next

 

2.创建Store: 在Vue应用程序中创建一个Pinia Store

import { createPinia } from 'pinia';

const pinia = createPinia();

 

3.定义State: 在Store中定义需要的状态。

export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
});

 4.使用Store: 在组件中使用Store。可以使用useStore函数来访问Store

import { useCounterStore } from './stores/counter';
import { computed } from 'vue';

export default {
  setup() {
    const counterStore = useCounterStore();
    const count = computed(() => counterStore.count);
    return { count };
  },
};

 5.调用Actions: 可以通过调用actions来修改状态。例如，可以在模板中使用@click事件来调用increment方法。

 

<button @click="increment">+</button>
<p>{{ count }}</p>
<button @click="decrement">-</button>