vue3 pinia状态管理

安装 Pinia

首先，你需要安装 Pinia。可以通过 npm 或 yarn 来进行安装：

npm install pinia
yarn add pinia

创建 Pinia 实例

在你的 Vue 应用程序中创建 Pinia 实例，并将其传递给 Vue 应用。通常在 main.js 或 main.ts 文件中进行：

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

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

app.use(pinia);
app.mount('#app');

定义 Store

Pinia 的核心概念是“store”。你可以创建一个 store 来管理相关状态。下面是一个简单的示例：

// stores/counter.js
import { defineStore } from 'pinia';

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

在组件中使用 Store

一旦定义了 store，你可以在任何组件中使用它。下面是如何在组件中使用 useCounterStore 的示例：

<template>
  <div>
    <h1>{{ count }}</h1>
    <h2>{{ doubleCount }}</h2>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { useCounterStore } from '@/stores/counter';

export default {
  setup() {
    const counterStore = useCounterStore();
    
    return {
      count: counterStore.count,
      doubleCount: counterStore.doubleCount,
      increment: counterStore.increment,
      decrement: counterStore.decrement,
    };
  },
};
</script>

pinia 增删改查

// stores/taskStore.js
import { defineStore } from 'pinia';

export const useTaskStore = defineStore('task', {
  state: () => ({
    tasks: [],
  }),
  actions: {
    addTask(task) {
      this.tasks.push(task);
    },
    removeTask(taskId) {
      this.tasks = this.tasks.filter(task => task.id !== taskId);
    },
    updateTask(updatedTask) {
      const index = this.tasks.findIndex(task => task.id === updatedTask.id);
      if (index !== -1) {
        this.tasks[index] = updatedTask;
      }
    },
    getTask(taskId) {
      return this.tasks.find(task => task.id === taskId);
    },
  },
});

在组件中使用

<template>
  <div>
    <h1>任务管理</h1>
    <input v-model="newTask" placeholder="新任务名称" />
    <button @click="addNewTask">添加任务</button>
    
    <ul>
      <li v-for="task in taskStore.tasks" :key="task.id">
        {{ task.name }}
        <button @click="removeTask(task.id)">删除</button>
        <button @click="updateTask(task)">更新</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useTaskStore } from '../stores/taskStore';

export default {
  setup() {
    const taskStore = useTaskStore();
    const newTask = ref('');

    const addNewTask = () => {
      if (newTask.value.trim()) {
        taskStore.addTask({ id: Date.now(), name: newTask.value });
        newTask.value = ''; // 清空输入框
      }
    };

    const removeTask = (taskId) => {
      taskStore.removeTask(taskId);
    };

    const updateTask = (task) => {
      const updatedName = prompt('更新任务名称:', task.name);
      if (updatedName !== null) {
        taskStore.updateTask({ ...task, name: updatedName });
      }
    };

    return { taskStore, newTask, addNewTask, removeTask, updateTask };
  },
};
</script>

响应式和插件

Pinia 的状态是响应式的，因此当你更新状态时，任何依赖于该状态的组件都会自动重新渲染。

同时，你也可以为 Pinia 添加插件来实现诸如持久化状态、日志等功能。例如，如果你想要持久化状态，可以使用 pinia-plugin-persistedstate 插件。

1. 安装插件

首先，你需要在项目中安装 pinia-plugin-persistedstate。可以使用 npm 或 yarn 进行安装

# 使用 npm 安装
npm install pinia-plugin-persistedstate

# 使用 yarn 安装
yarn add pinia-plugin-persistedstate

2. 配置 Pinia 插件

在创建 Pinia 实例时，需要将 pinia-plugin-persistedstate 作为插件添加进去。以下是一个示例代码：

// main.js 或 main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
import App from './App.vue';

// 创建 Pinia 实例
const pinia = createPinia();
// 使用持久化插件
pinia.use(piniaPluginPersistedstate);

const app = createApp(App);
// 将 Pinia 实例挂载到应用中
app.use(pinia);
app.mount('#app');

3. 在 Store 中启用持久化

在定义 Pinia store 时，可以通过 persist 选项来启用持久化。以下是一个简单的 store 示例：

// store/counter.js 或 store/counter.ts
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    }
  },
  // 启用持久化
  persist: true
});

4. 自定义持久化配置

你还可以对持久化进行更详细的配置，例如指定存储方式（localStorage 或 sessionStorage）、存储的键名等。以下是一个自定义配置的示例：

// store/counter.js 或 store/counter.ts
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    }
  },
  persist: {
    // 存储方式，默认为 localStorage
    storage: localStorage, 
    // 存储的键名，默认为 store 的 id
    key: 'my-counter-store', 
    // 只持久化指定的状态
    paths: ['count'] 
  }
});

在上述示例中，通过 storage 选项指定了存储方式为 localStorage，通过 key 选项指定了存储的键名，通过 paths 选项指定了只持久化 count 状态。