Pinia 面向未来的 Vuex

一、什么是 pinia？

Pinia 是一个用于 Vue 的状态管理库，类似 Vuex, 是 Vue 的另一种状态管理方案，支持 Vue2 和 Vue3。

本文只讲 Pinia 在 Vue3 中的使用, 在 Vue2 中使用略有差异，参考官方文档

二、为什么要使用它？

1、语法比 vuex 简单，易于理解和学习，而且还可以自由扩展Plugins

2、极轻，仅有 1 KB

3、对 ts 支持比 vuex 好

三、安装

yarn add pinia@next
# or
npm install pinia@next

安装完成后，在main.js中引入 Pinia 库并导入createPinia ，并在你的 Vue 应用中用use() 方法将其添加为 Vue 插件。

// main.js

import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";

createApp(App).use(createPinia()).mount("#app");

四、使用

1、在 src 目录下新建store文件夹,并创建index.js

// 在index.js中定义useStore

import { defineStore } from "pinia";

export const useStore = defineStore("storeId", {
  // 注意state是一个函数
  state() {
    return {
      count: 0,
      name: "Eduardo",
    };
  },
});

2、使用state

// App.vue

<script setup>
import { useStore } from "./store";
// 也可以解构
const store = useStore();
// let { name, count, isAdmin } = store;

// 修改单个值
const changeCount = () => {
  store.count++;
};
// 修改多个值
const changeAll = () => {
  store.$patch({
    count: store.count + 1000,
    name: "Abalam",
  });
};
</script>

<template>
  <div>
    <p>count: {{ store.count }}</p>
    <p>name: {{ store.name }}</p>
    <button @click="changeCount">修改 count</button>
    <button @click="changeAll">修改 count 和 name</button>
  </div>
</template>

3、使用getters

// store/index.js

import { defineStore } from "pinia";

export const useStore = defineStore("storeId", {
  // 注意state是一个函数
  state() {
    return {
      count: 0,
      name: "Eduardo",
    };
  },
  getters: {
    // doubleCount: (state) => state.counter * 2,
    //  也可以只直接用this访问
    doubleCount() {
      return this.count * 2;
    },
  },
});

// App.vue

<script setup>
import { useStore } from "./store";
// 也可以解构
const store = useStore();
// let { name, count, isAdmin } = store;

// 修改单个值
const changeCount = () => {
  store.count++;
};
// 修改多个值
const changeAll = () => {
  store.$patch({
    count: store.count + 1000,
    name: "Abalam",
  });
};
</script>

<template>
  <div>
    <p>count: {{ store.count }}</p>
    <p>name: {{ store.name }}</p>
    <p>doubleCount: {{ store.doubleCount }}</p>
    <button @click="changeCount">修改 count</button>
    <button @click="changeAll">修改 count 和 name</button>
  </div>
</template>

4、使用actions

注意：Pinia 没有 mutations，同步异步修改都是通过 actions，异步修改就和普通异步函数调用一样。

// store/index.js

import { defineStore } from "pinia";

const delay = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(10000);
      resolve();
    }, 5000);
  });
};

export const useStore = defineStore("storeId", {
  // 注意state是一个函数
  state() {
    return {
      count: 0,
      name: "Eduardo",
    };
  },
  getters: {
    // doubleCount: (state) => state.counter * 2,
    //  也可以只直接用this访问
    doubleCount() {
      return this.count * 2;
    },
  },
  actions: {
    changeName(val) {
      this.name = val;
    },
    async asyncChangeCount(val) {
      await delay();
      console.log(1);
      this.count = val;
    },
  },
});

// App.vue

<script setup>
import { useStore } from "./store";
// 也可以解构
const store = useStore();
// let { name, count, isAdmin } = store;

// 修改单个值
const changeCount = () => {
  store.count++;
};
// 修改多个值
const changeAll = () => {
  store.$patch({
    count: store.count + 1000,
    name: "Abalam",
  });
};
const changeName = () => {
  store.changeName("fred");
};
const asyncChangeCount = async () => {
  await store.asyncChangeCount(100);
  console.log(50000);
};
</script>

<template>
  <div>
    <p>count: {{ store.count }}</p>
    <p>name: {{ store.name }}</p>
    <p>doubleCount: {{ store.doubleCount }}</p>
    <button @click="changeCount">修改 count</button>
    <button @click="changeAll">修改 count 和 name</button>
    <button @click="changeName">修改 name</button>
    <button @click="asyncChangeCount">异步修改 count</button>
  </div>
</template>

4、访问其他 getter

我们在store文件夹下新建user.js

// store/user.js

import { defineStore } from "pinia";
import createUserStore from "./user";

export default defineStore("userStore", {
  state() {
    return {
      name: "user",
      age: 18,
    };
  },
});

// store/index.js

import { defineStore } from "pinia";
import createUserStore from "./user";

const delay = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(10000);
      resolve();
    }, 5000);
  });
};

export const useStore = defineStore("storeId", {
  // 注意state是一个函数
  state() {
    return {
      count: 0,
      name: "Eduardo",
    };
  },
  getters: {
    doubleCount() {
      return this.count * 2;
    },
    countAddAge() {
      const userStore = createUserStore();
      return this.count + userStore.age;
    },
  },
  actions: {
    changeName(val) {
      this.name = val;
    },
    async asyncChangeCount(val) {
      await delay();
      console.log(1);
      this.count = val;
    },
  },
});

// App.vue

<script setup>
import { useStore } from "./store";
// 也可以解构
const store = useStore();
// let { name, count, isAdmin } = store;

// 修改单个值
const changeCount = () => {
  store.count++;
};
// 修改多个值
const changeAll = () => {
  store.$patch({
    count: store.count + 1000,
    name: "Abalam",
  });
};
const changeName = () => {
  store.changeName("fred");
};
const asyncChangeCount = async () => {
  await store.asyncChangeCount(100);
  console.log(50000);
};
</script>

<template>
  <div>
    <p>count: {{ store.count }}</p>
    <p>name: {{ store.name }}</p>
    <p>doubleCount: {{ store.doubleCount }}</p>
    <p>和其他store的getters一起使用: {{ store.countAddAge }}</p>
    <button @click="changeCount">修改 count</button>
    <button @click="changeAll">修改 count 和 name</button>
    <button @click="changeName">修改 name</button>
    <button @click="asyncChangeCount">异步修改 count</button>
  </div>
</template>

五、源码地址

皮皮虾也是虾的 gitee

皮皮虾也是虾 / pinia

Pinia 面向未来的 Vuex

一、什么是 pinia？

二、为什么要使用它？

三、安装

四、使用

五、源码地址

简介

发行版

贡献者

近期动态

皮皮虾也是虾 / pinia .gitee-modal { width: 500px !important; }

Pinia 面向未来的 Vuex

一、什么是 pinia？

二、为什么要使用它？

三、安装

四、使用

五、源码地址

简介

发行版

贡献者

近期动态

搜索帮助

皮皮虾也是虾 / pinia