深入浅出 Pinia：状态管理库的基本使用

一、Pinia 的作用

1. 跨组件共享状态

2. 统一管理状态

二、Pinia 的使用步骤

1. 安装 Pinia

2. 在 Vue 应用实例中使用 Pinia

3. 定义状态（store）

4. 在组件中使用 store

三、代码实例与测试

1. 登录组件（login.vue）中的代码

2. 文章列表组件（article.vue）中的代码

3. 测试过程

在现代 Web 应用开发中，状态管理是一个至关重要的环节。当应用规模逐渐增大，组件之间的数据共享和状态同步变得复杂，这时候就需要一个强大的状态管理库来协助。Pinia 作为 Vue 专属的状态管理库，为我们提供了高效且便捷的解决方案。

一、Pinia 的作用

1. 跨组件共享状态

在一个 Vue 项目中，不同组件之间的数据共享往往是一个难题。例如，在登录组件（login.vue）中获取到的用户登录令牌（token），如果在文章列表组件（article.vue）中也需要使用，按照常规的组件隔离原则，这两个组件无法直接访问彼此的数据。Pinia 的出现解决了这个问题，它允许我们将 token 存储在一个全局的状态容器中，其他组件都可以从这个容器中获取到 token，实现了跨组件的状态共享。

2. 统一管理状态

Pinia 提供了一种集中式的状态管理方式。通过定义状态（store），我们可以将相关的数据和操作方法放在一起，使得代码结构更加清晰，易于维护。无论是简单的变量存储，还是复杂的数据结构和业务逻辑，都可以在 Pinia 中进行有效的管理。

二、Pinia 的使用步骤

1. 安装 Pinia

使用 Pinia 的第一步是安装它。打开命令行工具，在项目根目录下执行以下命令：

npm install pinia

2. 在 Vue 应用实例中使用 Pinia

在main.js文件中，首先导入createPinia函数，它是 Pinia 库提供的用于创建 Pinia 实例的方法：

import { createPinia } from 'pinia';

调用createPinia函数创建一个 Pinia 实例，并将其挂载到 Vue 应用实例上：

const pinia = createPinia();

const app = createApp(App);
app.use(pinia);

3. 定义状态（store）

在项目的src/stores目录下（如果没有该目录，需手动创建）新建一个token.js文件，用于定义与 token 相关的状态。
在token.js文件中，首先导入defineStore函数：

import { defineStore } from 'pinia';

调用defineStore函数来定义一个 store，它接受两个参数：
- 第一个参数是状态的名称，要求具有唯一性，这里我们命名为token。
- 第二个参数是一个函数，在函数内部定义状态的具体内容，包括变量、修改状态的函数和移除状态的函数。

export const useTokenStore = defineStore('token', () => {
  const token = ref(''); // 定义响应式变量token，初始值为空字符串

  const setToken = (newToken) => {
    token.value = newToken; // 定义修改token值的函数
  };

  const removeToken = () => {
    token.value = ''; // 定义移除token值的函数，将其重置为空字符串
  };

  return { token, setToken, removeToken }; // 返回包含状态变量和操作函数的对象
});

4. 在组件中使用 store

在需要使用 token 的组件中，例如登录组件（login.vue）和文章列表组件（article.vue），首先导入定义好的 store：

import { useTokenStore } from '@/stores/token';

在登录组件中，当登录成功获取到 token 后，将其存储到 Pinia 的 store 中：

const tokenStore = useTokenStore();
tokenStore.setToken(resultData); // resultData为登录接口返回的token数据

在文章列表组件中，在发送请求之前，从 store 中获取 token 并添加到请求头中：

const tokenStore = useTokenStore();
axios.get('article/list', {
  headers: {
    Authorization: tokenStore.token
  }
});

三、代码实例与测试

1. 登录组件（login.vue）中的代码

<template>
  <div>
    <input type="text" v-model="username" placeholder="用户名" />
    <input type="password" v-model="password" placeholder="密码" />
    <button @click="login">登录</button>
  </div>
</template>

<script>
import { useTokenStore } from '@/stores/token';
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    async login() {
      const response = await axios.post('login', {
        username: this.username,
        password: this.password
      });
      if (response.data.success) {
        const tokenStore = useTokenStore();
        tokenStore.setToken(response.data.token);
      }
    }
  }
};
</script>

2. 文章列表组件（article.vue）中的代码

<template>
  <div>
    <h2>文章列表</h2>
    <ul>
      <li v-for="article in articles" :key="article.id">{{ article.title }}</li>
    </ul>
  </div>
</template>

<script>
import { useTokenStore } from '@/stores/token';
import axios from 'axios';

export default {
  data() {
    return {
      articles: []
    };
  },
  async mounted() {
    const tokenStore = useTokenStore();
    const response = await axios.get('article/list', {
      headers: {
        Authorization: tokenStore.token
      }
    });
    this.articles = response.data;
  }
};
</script>

3. 测试过程

启动项目后，在浏览器中打开登录页面。输入用户名和密码，点击登录按钮。
登录成功后，尝试访问文章列表页面。如果一切配置正确，应该能够看到文章列表数据正常显示。

通过以上步骤，我们成功地在 Vue 项目中使用 Pinia 实现了状态管理，包括 token 的存储、获取和在不同组件之间的共享，确保了应用在需要授权的接口调用时能够正确携带 token，实现了用户认证和数据获取的功能。

Pinia 为 Vue 项目的状态管理提供了简洁而强大的解决方案，通过合理的使用，可以使项目的状态管理更加高效、易于维护。在实际开发中，我们可以根据项目需求，进一步扩展和优化 Pinia 的使用，提升应用的整体性能和用户体验。