vue3的Pinia

Vue 3中的Pinia是Vue 3官方推荐的状态管理模式，由尤雨溪（尤大）创建，它是Vuex的一个轻量级替代方案，主要用于简化状态管理。Pinia的设计理念强调了小而精，易于理解和使用，它将store替换为普通的JavaScript对象，并移除了像actions、getters这样的概念，使得状态管理和副作用处理更加直接。

Pinia的核心组件是一个名为`createStore`的函数，用于创建store实例。在这个store中，你可以定义state、mutations（状态更新函数）、actions（异步操作）以及optional getters。它鼓励模块化结构，每个store对应于应用的一个独立部分，提高代码的组织性和可维护性。

例如，基本的pinia store配置可以如下：

import { createStore } from 'pinia'

export const useTodoStore = createStore({
  state() {
    return {
      todos: [],
      visibilityFilter: 'SHOW_ALL'
    }
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push(todo)
    },
    toggleVisibility(state, filter) {
      state.visibilityFilter = filter
    }
  },
  actions: {
    async fetchTodos({ commit }) {
      // 异步获取todos...
      commit('addTodos', fetchedTodos)
    }
  }
})