Vue2或Vue3使用Pinia快速入门

Pinia 中文文档
一种前端实现不同组件之间共享状态数据的技术，可以调用异步函数访问服务器

坑：Pinia 的状态默认情况下是不会在浏览器刷新后保持的，因为它的状态是存储在内存中的，而不是持久化到本地存储或服务器端的。

当你刷新浏览器时，整个前端应用程序的状态都会被重置，包括 Pinia 的状态。这意味着你需要在应用程序重新加载时重新初始化 Pinia 的状态。

要在浏览器刷新后保持状态，可以考虑以下几种方法：

• 使用浏览器的本地存储或持久化库（如LocalStorage、SessionStorage或IndexedDB）将状态数据持久化保存在客户端，以便在刷新后重新加载。

• 在应用程序初始化时从服务器获取状态数据。这通常需要进行用户身份验证和服务器端存储。

• 使用服务端渲染（SSR）来保持状态。SSR 可以在服务器上生成初始 HTML，包括状态数据，以便在浏览器加载时立即可用。
  

  Pinia快速入门

  • 一、Pinia是什么？有什么作用？
  • • 是什么？
    • 有什么作用？
    • 什么是store?
    • 在 Pinia 中，store 对象包括以下属性：
  • 二、Vue2使用Pinia步骤
  • • 1.首先，确保你的项目中已经安装了 Vue 2.x 和 Pinia。
    • 2.创建 Pinia Store：
    • 3.初始化 Pinia 并在 Vue 2 中注册：
    • 4.在 Vue 2 组件中使用 Pinia Store：
  • 三、Vue3使用Pinia步骤
  • • 1.创建PiniaStore:
    • 2.初始化 Pinia 并在 Vue 3 中注册：
    • 3.在 Vue 3 组件中使用 Pinia Store:
  • 总结

---

一、Pinia是什么？有什么作用？

是什么？

Pinia 是一个用于状态管理的 Vue 3 应用程序的库。它是由 Vue.js 团队维护的，专门为 Vue 3 设计的状态管理解决方案。

有什么作用？

Pinia 的作用是帮助你管理应用程序的状态，使得状态在各个组件之间共享和维护更加容易。

什么是store?

“Store” 在上下文中通常指的是状态管理库中的一个概念，用于存储应用程序的数据状态。在 Vue.js 中，“store” 通常是指 Vuex，而在使用 Pinia 的情况下，它指的是 Pinia 的 store 对象，用于管理应用程序的状态。

在 Pinia 中，store 对象包括以下属性：

state：用于存储应用程序的状态数据。状态数据可以被组件访问和修改，但需要通过 mutations 来修改，以确保状态的一致性和可追踪性。
getters：用于定义获取state数据的标准函数。Getters 允许你在不修改状态的情况下从状态中获取数据。
actions：用于执行异步操作或一系列操作函数，可以修改状态数据。Actions 允许你在 store 中执行一些业务逻辑。

这些属性一起帮助你管理和操作状态数据，确保你的应用程序的数据状态在整个应用中保持一致。

二、Vue2使用Pinia步骤

1.首先，确保你的项目中已经安装了 Vue 2.x 和 Pinia。

npm install vue@2 pinia

然后，你可以按照以下步骤在 Vue 2 项目中使用 Pinia：

2.创建 Pinia Store：

在你的项目中创建一个 Pinia store文件夹，里面存放store.js：

import { defineStore } from 'pinia';

export const useMyStore = defineStore({
  id: 'myStore',
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3.初始化 Pinia 并在 Vue 2 中注册：

在你的入口文件（通常是 main.js）中，初始化 Pinia 并将其注册到 Vue 2：

import Vue from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

Vue.config.productionTip = false;

const pinia = createPinia();
Vue.use(pinia)

new Vue({
  render: (h) => h(App),
  pinia, // 注册 Pinia
}).$mount('#app');
1
2
3
4
5
6
7
8
9
10
11
12
13

4.在 Vue 2 组件中使用 Pinia Store：

在你的 Vue 2 组件中，你可以使用 useStore 函数引入 Pinia store，并访问状态和操作：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { useMyStore } from './store';

export default {
  computed: {
    count() {
      return useMyStore().count;
    },
  },
  methods: {
    increment() {
      useMyStore().increment();
    },
    decrement() {
      useMyStore().decrement();
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

三、Vue3使用Pinia步骤

首先，确保你的项目中已经安装了 Vue 3 和 Pinia：

npm install vue@next pinia
// vue的下一个版本及最新版本
然后你就可以按照以下步骤在vue中使用Pinia

1.创建PiniaStore:

在你的项目中创建一个Pinia store文件夹，其下创建store.js:

import { defineStore } from 'pinia';

export const useMyStore = defineStore({
  id: 'myStore',
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2.初始化 Pinia 并在 Vue 3 中注册：

在你的入口文件（通常是 main.js）中，初始化 Pinia 并将其注册到 Vue 3：

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

const app = createApp(App);
const pinia = createPinia();

app.use(pinia); // 注册 Pinia

app.mount('#app');
1
2
3
4
5
6
7
8
9
10

3.在 Vue 3 组件中使用 Pinia Store:

在你的 Vue 3 组件中，你可以使用 useStore 函数引入 Pinia store，并访问状态和操作：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { useMyStore } from './store';

export default {
  setup() {
    const store = useMyStore();

    return {
      count: store.count,
      increment: store.increment,
      decrement: store.decrement,
    };
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

setup() 函数：setup 函数是 Vue 3 中用于配置组件的入口函数，它在组件实例创建之前执行。这个函数可以返回一个包含响应式数据和方法的对象，这些数据和方法可以在组件的模板部分中使用。
return { count: store.count, increment: store.increment, decrement: store.decrement }：在 setup 函数中，通过 return 语句返回一个对象，其中包含了组件需要在模板中使用的数据和方法。

count: store.count：这里将 store 对象中的 count 属性赋值给 count，使得组件可以在模板中访问并显示该状态。
increment: store.increment 和 decrement: store.decrement：这两行将 store 对象中的 increment 方法和 decrement 方法赋值给 increment 和 decrement，以便在模板中触发这些操作。

总结

这样，你就可以在 Vue 2 或Vue3项目中使用 Pinia 进行状态管理。请注意，Vue 2 和 Vue 3 的生命周期和一些语法细节可能有所不同，需要根据你的项目进行适当的调整。
最好的方式是在新项目中直接使用 Vue 3 和 Pinia，以充分利用 Pinia 的特性和性能优势。