初识pinia

什么是pinia？

在网上看了很多关于pinia介绍，还有官方说明

pinia是一个用于vue的状态管理库，类似于vuex,是vue的另一种状态管理工具与 Vuex 相比，Pinia 提供了一个更简单的
API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript
一起使用时具有可靠的类型推断支持。

vuex和pina的区别？

Pina 和 Vuex 的区别在于： 目的不同：Pina 是一个前端快速开发框架，而 Vuex 是一个专门为 Vue.js
应用提供状态管理的库。 使用方式不同：Pina 封装了大量的功能，让用户不需要写大量的代码，可以快速开发应用；而 Vuex
提供了更多的灵活性，用户可以自定义状态管理的方式。

官方解释主要区别如下

• mutation 已被弃用。它们经常被认为是极其冗余的。它们初衷是带来 devtools 的集成方案，但这已不再是一个问题了。
• 无需要创建自定义的复杂包装器来支持 TypeScript，一切都可标注类型，API 的设计方式是尽可能地利用 TS 类型推理。
• 无过多的魔法字符串注入，只需要导入函数并调用它们，然后享受自动补全的乐趣就好。
• 无需要动态添加 Store，它们默认都是动态的，甚至你可能都不会注意到这点。注意，你仍然可以在任何时候手动使用一个 Store 来注册它，但因为它是自动的，所以你不需要担心它。
• 不再有嵌套结构的模块。你仍然可以通过导入和使用另一个 Store 来隐含地嵌套 stores 空间。虽然 Pinia 从设计上提供的是一个扁平的结构，但仍然能够在 Store 之间进行交叉组合。你甚至可以让 Stores 有循环依赖关系。
• 不再有可命名的模块。考虑到 Store 的扁平架构，Store 的命名取决于它们的定义方式，你甚至可以说所有 Store 都应该命名。

其实就是

pinia它没有mutation,他只有state，getters，action（同步、异步）使用他来修改state数据
pinia语法上比vuex更容易理解和使用，灵活。
pinia没有modules配置，没一个独立的仓库都是definStore生成出来的
pinia state是一个对象返回一个对象和组件的data是一样的语法

pinia使用

pinia和vuex使用差不多

安装

npm install pinia
//或者
yarn add pinia

app.vue文件使用

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

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

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

定义一个store.js

import { defineStore } from 'pinia'

// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useAlertsStore = defineStore('alerts', {
  // 其他配置...
})

//与 Vue 的选项式 API 类似，我们也可以传入一个带有 state、actions 与 getters 属性的 Option 对象
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

//也存在另一种定义 store 的可用语法。
//与 Vue 组合式 API 的 setup 函数 相似，我们可以传入一个函数，该函数定义了一些响应式属性和方法，
//并且返回一个带有我们想暴露出去的属性和方法的对象。
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }

  return { count, increment }
})

剩下的下周再说，先学会