Pinia快速入门（这些完全够用）

1. pinia是什么？

官网解释：

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

pinia是针对vue3推出的状态管理工具，状态管理，简单来说就是一个存储数据的地方，存放在pinia中的数据在各个组件中都能访问到，它是Vue生态中重要的组成部分。

2. 为什么要使用pinia？

vue2时代，状态管理工具是Vuex，实际上，pinia就是Vuex的升级版，官网也说过，为了尊重原作者，所以取名pinia，而没有取名Vuex，所以大家可以直接将pinia比作为Vue3的Vuex。

pinia的优点：

• Vue2和Vue3都支持。
• pinia中只有state、getter、action，抛弃了Vuex中的Mutation
• pinia中action支持同步和异步，Vuex不支持
• 良好的Typescript支持
• 无需再创建各个模块嵌套了，pinia中每个store都是独立的，互相不影响。
• 体积非常小，只有1KB左右。
• pinia支持插件来扩展自身功能。
• 支持服务端渲染。

pinia的优点还有非常多，上面列出的主要是它的一些主要优点，更多细节的地方还需要大家在使用的时候慢慢体会。

3. pinia基础使用

3.1. 安装pinia

和vue-router、vuex等一样，我们想要使用pinia都需要先安装它，安装它也比较简单。

安装命令：

yarn add pinia
  # 或者使用 npm
  npm install pinia

安装完成后我们需要将pinia挂载到Vue应用中，也就是我们需要创建一个根存储传递给应用程序，简单来说就是创建一个存储数据的数据桶，放到应用程序中去。

修改main.js，引入pinia提供的createPinia方法，创建根存储。

<!-- main.ts -->


    import { createApp } from "vue";
    import App from "./App.vue";
    import { createPinia } from "pinia";
    const pinia = createPinia();


    const app = createApp(App);
    app.use(pinia);
    app.mount("#app");

3.2. 创建store

store简单来说就是数据仓库的意思，我们数据都放在store里面。当然也可以把它理解为一个公共组件，只不过该公共组件只存放数据，这些数据我们其它所有的组件都能够访问且可以修改。

我们需要使用pinia提供的defineStore()方法来创建一个store，该store用来存放我们需要全局使用的数据。

首先在项目src目录下新建store文件夹，用来存放我们创建的各种store，然后在该目录下新建user.ts文件，主要用来存放与user相关的store。

/src/store/user.ts


  import { defineStore } from 'pinia'


  // 第一个参数是应用程序中 store 的唯一 id
  export const useUsersStore = defineStore('users', {
    // 其它配置项

创建store很简单，调用pinia中的defineStore函数即可，该函数接收两个参数：

• name：一个字符串，必传项，该store的唯一id。
• options：一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等。

我们可以定义任意数量的store，因为我们其实一个store就是一个函数，这也是pinia的好处之一，让我们的代码扁平化了，这和Vue3的实现思想是一样的。

3.3. 使用store

前面我们创建了一个store，说白了就是创建了一个方法，那么我们的目的肯定是使用它，假如我们要在App.vue里面使用它，该如何使用呢？

/src/App.vue
  <script setup lang="ts">
    import { useUsersStore } from "../src/store/user";
  const store = useUsersStore();
  console.log(store);
</script>

使用store很简单，直接引入我们声明的useUsersStore 方法即可，我们可以先看一下执行该方法输出的是什么：

3.4. 添加state

我们都知道store是用来存放公共数据的，那么数据具体存在在哪里呢？前面我们利用defineStore函数创建了一个store，该函数第二个参数是一个options配置项，我们需要存放的数据就放在options对象中的state属性内。

假设我们往store添加一些任务基本数据，修改user.ts代码。

export const useUsersStore = defineStore("users", {
  state: () => {
  return {
  name: "老铁666",
  age: 23,
  sex: "男",
  };
  },
  });

上段代码中我们给配置项添加了state属性，该属性就是用来存储数据的，我们往state中添加了3条数据。需要注意的是，state接收的是一个箭头函数返回的值，它不能直接接收一个对象。

3.5. 操作state

我们往store存储数据的目的就是为了操作它，那么我们接下来就尝试操作state中的数据。

3.5.1. 读取state数据

读取state数据很简单，前面我们尝试过在App.vue中打印store，那么我们添加数据后再来看看打印结果：

这个时候我们发现打印的结果里面多了几个属性，恰好就是我们添加的数据，修改App.vue，让这几个数据显示出来。

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <p>姓名：{{ name }}</p>
  <p>年龄：{{ age }}</p>
  <p>性别：{{ sex }}</p>
</template>
<script setup lang="ts">
  import { ref } from "vue";
  import { useUsersStore } from "../src/store/user";
  const store = useUsersStore();
  const name = ref<string>(store.name);
  const age = ref<number>(store.age);
  const sex = ref<string>(store.sex);
</script>

输出结果：

上段代码中我们直接通过store.age等方式获取到了store存储的值，这样做还是比较繁琐的，我们其实可以用解构的方式来获取值，使得代码更简洁一点。

解构代码如下：

import { useUsersStore } from "../src/store/user";
  const store = useUsersStore();
  const { name, age, sex } = store;

上段代码实现的效果与一个一个获取的效果一样，不过代码简洁了很多。

3.5.2. 多个组件使用state

我们使用store的最重要的目的就是为了组件之间共享数据，那么接下来我们新建一个child.vue组件，在该组件内部也使用state数据。

child.vue代码如下：

<template>
  <h1>我是child组件</h1>
  <p>姓名：{{ name }}</p>
  <p>年龄：{{ age }}</p>
  <p>性别：{{ sex }}</p>
</template>
<script setup lang="ts">
  import { useUsersStore } from "../src/store/user";
  const store = useUsersStore();
  const { name, age, sex } = store;
</script>

child组件和app.vue组件几乎一样，就是很简单的使用了store中的数据。

实现效果：

这样就实现了多组件同时使用store中的数据。

3.5.3. 修改state数据

如果想要修改store中的数据，可以直接重新赋值即可。

我们在App.vue里面添加一个按钮，点击按钮修改store中的某一个数据。

代码如下：

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <p>姓名：{{ name }}</p>
  <p>年龄：{{ age }}</p>
  <p>性别：{{ sex }}</p>
  <button @click="changeName">更改姓名</button>
</template>
<script setup lang="ts">
  import child from './child.vue';
  import { useUsersStore } from "../src/store/user";
  const store = useUsersStore();
  const { name, age, sex } = store;
  const changeName = () => {
    store.name = "张三";
    console.log(store);
  };
</script>

上段代码新增了changeName 方法，改变了store中name的值，我们点击按钮，看看最终效果：

我们可以看到store中的name确实被修改了，但是页面上似乎没有变化，这说明我们的使用的name不是响应式的。

想要让name等属性变为响应式的，其实pinia给我们提供了方法：

storeToRefs函数：

• 用法：storeToRefs(store)
• 作用：将 pinia 中的 store 对象中的状态转换为具有 .value 的 ref 对象集合。

利用pinia的storeToRefs函数，可以将state中的数据变为了响应式的。

app.vue和child.vue代码修改如下：

import { storeToRefs } from 'pinia';
  const store = useUsersStore();
  const { name, age, sex } = storeToRefs(store);

child.vue代码如下：

<template>
  <h1>我是child组件</h1>
  <p>姓名：{{ name }}</p>
  <p>年龄：{{ age }}</p>
  <p>性别：{{ sex }}</p>
  <button @click="changeName">更改姓名</button>
</template>
<script setup lang="ts">
  import { useUsersStore } from "../src/store/user";
  import { storeToRefs } from 'pinia';
  const store = useUsersStore();
  const { name, age, sex } = storeToRefs(store);
  const changeName = () => {
    store.name = "小猪课堂";
  };
</script>

修改为storeToRefs函数后，实现效果如下：

现在store中数据就是响应式的了！

3.5.4. 重置state

有时候我们修改了state数据，想要将它还原，这个时候该怎么做呢？就比如用户填写了一部分表单，突然想重置为最初始的状态。

$reset()方法：

• $reset() 方法是用于重置状态的方法。当调用 $reset() 方法时，它将会将状态对象恢复到初始状态。

此时，我们直接调用store的$reset()方法即可，继续使用我们的例子，添加一个重置按钮。

代码如下：

<button @click="reset">重置store</button>
  // 重置store
  const reset = () => {
    store.$reset();
  };

当我们点击重置按钮时，store中的数据会变为初始状态，页面也会更新。

3.5.5. 批量更改state数据

前面我们修改state的数据是都是一条一条修改的，比如store.name="张三"等等，如果我们一次性需要修改很多条数据的话，有更加简便的方法。

$patch方法：

• $patch 方法是用于局部更新状态的方法。它允许您通过传递一个包含要更新的属性的对象来更新状态。可用于批量修改数据。

使用store的$patch方法，修改app.vue代码，添加一个批量更改数据的方法。

代码如下：

<button @click="patchStore">批量修改数据</button>
  // 批量修改数据
  const patchStore = () => {
    store.$patch({
      name: "张三",
      age: 100,
      sex: "女",
    });
  };

但是采用这种批量更改的方式似乎代价有一点大，假如我们state中有些字段无需更改，但是按照上段代码的写法，我们必须要将state中的所有字段例举出了。

所以，为了解决该问题，pinia提供的$patch方法还可以接收一个回调函数，它的用法有点像我们的数组循环回调函数了。

示例代码如下：

store.$patch((state) => {
  state.items.push({ name: 'shoes', quantity: 1 })
  state.hasChanged = true
})

上段代码中我们即批量更改了state的数据，又没有将所有的state字段列举出来。

3.5.6. 直接替换整个state

pinia提供了方法让我们直接替换整个state对象，使用store的$state方法。

$state方法：

• 用于获取状态的方法。它允许直接访问 store 实例的状态对象。

注意：

• $state 是一个只读属性，用于获取状态的当前值。
• 对 $state 的访问不会触发响应式更新。

示例代码：

store.$state = { counter: 666, name: '张三' }

上段代码会将我们提前声明的state替换为新的对象。

这种使用$state 方法完全替换掉 store 的 state的方法，不建议在生产中使用。具体原因如下：

• 丢失响应性：使用 $state 方法替换整个状态对象会丢失 Vue 的响应系统的能力。Vue 无法检测到状态的变化，导致相关组件无法自动重新渲染，可能导致界面不同步或不正确的行为。
• 组件无法依赖更新：当使用 $state 方法替换整个状态对象时，组件将无法依赖状态的特定属性进行更新。组件通常会使用计算属性、监听器或侦听器等方式来响应状态的变化，但这些机制将失效。
• 非标准做法：使用 $state 方法替换整个状态对象违反了常见的状态管理模式和最佳实践。在大多数状态管理库中，包括 Pinia，都不鼓励或提供直接替换整个状态对象的方法。
• 可维护性和调试困难：使用 $state 方法替换整个状态对象会使代码更难以维护和调试。在替换状态对象时，您需要确保新对象与原始状态对象具有相同的属性结构，以避免出现错误或未定义的行为。
• 可能导致性能问题：由于无法使用 Vue 的响应系统来进行状态更新的优化和批处理，使用 $state 方法替换整个状态对象可能会导致性能下降，特别是在具有大量数据或频繁更新的情况下

综上所述，建议使用合适的方式来更新状态对象的属性，而不是使用 $state 方法完全替换整个状态对象。这样可以保持响应性、遵循最佳实践，并确保代码的可维护性和性能。

3.6. getters属性

在 Pinia 中，getters 属性是用于定义和访问 store 的计算属性的对象。该对象里面是各种各样的方法。可以把getter想象成Vue中的计算属性，它的作用就是返回一个新的结果，同样的它和计算属性一样也是会被缓存的。

3.6.1. 添加getter

我们先来看一下如何定义getter吧，修改user.ts。

代码如下：

export const useUsersStore = defineStore("users", {
  state: () => {
    return {
      name: "老铁666",
      age: 23,
      sex: "男",
    };
  },
  getters: {
    getAddAge: (state) => {
      return state.age + 100;
    },
  },
});

上段代码中我们在配置项参数中添加了getter属性，该属性对象中定义了一个getAddAge方法，该方法会默认接收一个state参数，也就是state对象，然后该方法返回的是一个新的数据。

3.6.2. 使用getter

我们在store中定义了getter，那么在组件中如何使用呢？使用起来非常简单，我们修改App.vue。

代码如下：

<template>
  <p>新年龄：{{ store.getAddAge }}</p>
  <button @click="patchStore">批量修改数据</button>
</template>
<script setup lang="ts">
  import { useUsersStore } from "../src/store/user";
  const store = useUsersStore();
  // 批量修改数据
  const patchStore = () => {
    store.$patch({
      name: "张三",
      age: 100,
      sex: "女",
    });
  };
</script>

这段代码中我们直接在标签上使用了store.gettAddAge方法，这样可以保证响应式，其实我们state中的name等属性也可以以此种方式直接在标签上使用，也可以保持响应式。

当我们点击批量修改数据按钮时，页面上的新年龄字段也会跟着变化。

3.6.3. getter中调用其它getter

前面我们的getAddAge方法只是简单的使用了state方法，但是有时候我们需要在这一个getter方法中调用其它getter方法，这个时候如何调用呢？

其实很简单，我们可以直接在getter方法中调用this，this指向的便是store实例，所以理所当然的能够调用到其它getter。

示例代码如下：

export const useUsersStore = defineStore("users", {
  state: () => {
    return {
      name: "老铁666",
      age: 23,
      sex: "男",
    };
  },
  getters: {
    getAddAge: (state) => {
      return state.age + 100;
    },
    getNameAndAge(): string {
      return this.name + this.getAddAge; // 调用其它getter
    },
  },
});

这段代码中我们又定义了一个名为getNameAndAge的getter函数，在函数内部直接使用了this来获取state数据以及调用其它getter函数。

注意：这里没有使用箭头函数的形式，这是因为我们在函数内部使用了this，箭头函数的this指向问题可以移步到我笔记的（箭头函数的this指向问题）一章！

那么在组件中调用的形式没什么变化，代码如下：

<p>调用其它getter：{{ store.getNameAndAge }}</p>

3.6.4. getter传参

既然getter函数做了一些计算或者处理，那么我们很可能会需要传递参数给getter函数，但是我们前面说getter函数就相当于store的计算属性，和vue的计算属性差不多，那么我们都知道Vue中计算属性是不能直接传递参数的，所以我们这里的getter函数如果要接受参数的话，也是需要做处理的。

示例代码：

export const useUsersStore = defineStore("users", {
  state: () => {
    return {
      name: "小猪课堂",
      age: 25,
      sex: "男",
    };
  },
  getters: {
    getAddAge: (state) => {
      return (num: number) => state.age + num;
    },
    getNameAndAge(): string {
      return this.name + this.getAddAge; // 调用其它getter
    },
  },
});

上段代码中我们getter函数getAddAge接收了一个参数num，这种写法其实有点闭包的概念在里面了，相当于我们整体返回了一个新的函数，并且将state传入了新的函数。

接下来我们在组件中使用，方式很简单，代码如下：

<p>新年龄：{{ store.getAddAge(1100) }}</p>

3.7. actions属性

前面我们提到的state和getters属性都主要是数据层面的，并没有具体的业务逻辑代码，它们两个就和我们组件代码中的data数据和computed计算属性一样。

那么，如果我们有业务代码的话，最好就是卸载actions属性里面，该属性就和我们组件代码中的methods相似，用来放置一些处理业务逻辑的方法。

actions属性值同样是一个对象，该对象里面也是存储的各种各样的方法，包括同步方法和异步方法。

3.7.1. 添加actions

我们可以尝试着添加一个actions方法，修改user.ts。

代码如下：

export const useUsersStore = defineStore("users", {
  state: () => {
    return {
      name: "老铁666",
      age: 23,
      sex: "男",
    };
  },
  getters: {
    getAddAge: (state) => {
      return (num: number) => state.age + num;
    },
    getNameAndAge(): string {
      return this.name + this.getAddAge; // 调用其它getter
    },
  },
  actions: {
    saveName(name: string) {
      this.name = name;
    },
  },
});

上段代码中我们定义了一个非常简单的actions方法，在实际场景中，该方法可以是任何逻辑，比如发送请求、存储token等等。大家把actions方法当作一个普通的方法即可，特殊之处在于该方法内部的this指向的是当前store。

3.7.2. 使用actions

使用actions中的方法也非常简单，比如我们在App.vue中想要调用该方法。

代码如下：

const saveName = () => {
  store.saveName("我是老铁");
};

我们点击按钮，直接调用store中的actions方法即可。

4. 总结示例代码

前面的章节中的代码都不完整，主要贴的是主要代码部分，我们这节将我们本篇文章用到的所有代码都贴出来，供大家练习。

main.ts代码：

import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";
const pinia = createPinia();


const app = createApp(App);
app.use(pinia);
app.mount("#app");

user.ts代码：

import { defineStore } from "pinia";


  // 第一个参数是应用程序中 store 的唯一 id
  export const useUsersStore = defineStore("users", {
    state: () => {
      return {
        name: "老铁666",
        age: 23,
        sex: "男",
      };
    },
    getters: {
      getAddAge: (state) => {
        return (num: number) => state.age + num;
      },
      getNameAndAge(): string {
        return this.name + this.getAddAge; // 调用其它getter
      },
    },
    actions: {
      saveName(name: string) {
        this.name = name;
      },
    },
  });

App.vue代码：

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <p>姓名：{{ name }}</p>
  <p>年龄：{{ age }}</p>
  <p>性别：{{ sex }}</p>
  <p>新年龄：{{ store.getAddAge(1100) }}</p>
  <p>调用其它getter：{{ store.getNameAndAge }}</p>
  <button @click="changeName">更改姓名</button>
  <button @click="reset">重置store</button>
  <button @click="patchStore">批量修改数据</button>
  <button @click="saveName">调用aciton</button>

  <!-- 子组件 -->
  <child></child>
</template>
<script setup lang="ts">
import child from "./child.vue";
import { useUsersStore } from "../src/store/user";
import { storeToRefs } from "pinia";
const store = useUsersStore();
const { name, age, sex } = storeToRefs(store);
const changeName = () => {
  store.name = "张三";
  console.log(store);
};
// 重置store
const reset = () => {
  store.$reset();
};
// 批量修改数据
const patchStore = () => {
  store.$patch({
    name: "张三",
    age: 100,
    sex: "女",
  });
};
// 调用actions方法
const saveName = () => {
  store.saveName("我是老铁");
};
</script>

child.vue代码：

<template>
  <h1>我是child组件</h1>
  <p>姓名：{{ name }}</p>
  <p>年龄：{{ age }}</p>
  <p>性别：{{ sex }}</p>
  <button @click="changeName">更改姓名</button>
</template>
<script setup lang="ts">
import { useUsersStore } from "../src/store/user";
import { storeToRefs } from 'pinia';
const store = useUsersStore();
const { name, age, sex } = storeToRefs(store);
const changeName = () => {
  store.name = "老铁666";
};
</script>

5. 总结

pinia的知识点很少，如果你有Vuex基础，那么学起来更是易如反掌。其实我们更应该关注的是它的函数思想，大家有没有发现我们在Vue3中的所有东西似乎都可以用一个函数来表示，pinia也是延续了这种思想。

所以，大家理解这种组合式编程的思想更重要，pinia无非就是以下3个大点：

• state
• getters
• actions

当然，本篇文章只是讲解了基础使用部分，但是在实际工作中也能满足大部分需求了，如果还有兴趣学习pinia的其它特点，比如插件、订阅等等，可以移步官网：pinia官网。