Vue3 ist seit einiger Zeit veröffentlicht. Es übernimmt ein neues reaktionsfähiges System und erstellt einen neuen Satz von Composition API. Das umgebende Ökosystem von Vue verstärkt seine Bemühungen, sich an dieses neue System anzupassen, und auch die offizielle Staatsverwaltungsbibliothek Vuex passt sich an. Aus diesem Grund hat der Beamte einen neuen Vorschlag für Vuex 5 vorgelegt. [Verwandte Empfehlungen: „vue.js-Tutorial"]Composition API。Vue 的周边生态都在加紧适配这套新的系统，官方的状态管理库 Vuex 也在适配中，为此官方提出了一个 Vuex 5 的全新提案。【相关推荐：《vue.js教程》】
- 支持两种语法创建 Store：
Options Api和Composition Api； - 删除
mutations，只支持state、getters、actions； - 模块化的设计，能很好支持代码分割；
- 没有嵌套的模块，只有 Store 的概念；
- 完整的
TypeScript支持；
在这个提案下方，有个评论很有意思。简单翻译一下：
好巧不巧，Vuex5 的提案，与 Pinia 实现的功能不能说毫无关系，只能说一模一样，今天的文章就来给大家介绍一下这个菠萝。
安装
在现有项目中，用过如下命令进行 Pinia 模块的安装。
# yarn yarn add pinia@next # npm npm i pinia@next
安装完成后，需要在 Vue3 项目的入口文件中，进行导入安装。
// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
// 实例化 Vue
const app = createApp(App)
// 安装 Pinia
app.use(createPinia())
// 挂载在真实 DOM
app.mount('#app')上手
要使用 Pinia 的话，只需要定义一个 store，然后在用到该数据的地方进行导入。
定义 Store
import { defineStore } from "pinia"
// 对外部暴露一个 use 方法，该方法会导出我们定义的 state
const useCounterStore = defineStore({
// 每个 store 的 id 必须唯一
id: 'counter',
// state 表示数据源
state: () => ({
count: 0
}),
// getters 类似于 computed，可对 state 的值进行二次计算
getters: {
double () {
// getter 中的 this 指向 state
return this.count * 2
},
// 如果使用箭头函数会导致 this 指向有问题
// 可以在函数的第一个参数中拿到 state
double: (state) => {
return state.count * 2
}
},
// actions 用来修改 state
actions: {
increment() {
// action 中的 this 指向 state
this.count++
},
}
})
export default useCounterStore除了使用上述类似 vuex 的方式来构建 state，还可以使用 function 的形式来创建 store，有点类似于 Vue3 中的 setup()。
import { ref, computed } from "vue"
import { defineStore } from "pinia"
// 对外部暴露一个 use 方法，该方法会导出我们定义的 state
const useCounterStore = defineStore('counter', function () {
const count = ref(0)
const double = computed(() => count.value * 2)
function increment() {
count.value++
}
return {
count, double, increment
}
})
export default useCounterStore使用 Store
前面也介绍过，Pinia 提供了两种方式来使用 store，Options Api 和 Composition Api 中都完美支持。
Options Api
在 Options Api 中，可直接使用官方提供的 mapActions 和 mapState 方法，导出 store 中的 state、getter、action，其用法与 Vuex 基本一致，很容易上手。
import { mapActions, mapState } from 'pinia'
import { useCounterStore } from '../model/counter'
export default {
name: 'HelloWorld',
computed: {
...mapState(useCounterStore, ['count', 'double'])
},
methods: {
...mapActions(useCounterStore, ['increment'])
}
}Composition Api
Composition Api 中，不管是 state 还是 getter 都需要通过 computed 方法来监听变化，这和 Options Api 中，需要放到 computed 对象中的道理一样。另外， Options Api 中拿到的 state 值是可以直接进行修改操作的，当然还是建议写一个 action 来操作 state 值，方便后期维护。
// Composition Api
import { computed } from 'vue'
import { useCounterStore } from '../stores/counter'
export default {
name: 'HelloWorld',
setup() {
const counter = useCounterStore()
return {
// state 和 getter 都需要在使用 computed，这和 Options Api 一样
count: computed(() => counter.count),
double: computed(() => counter.double),
increment: () => { counter.count++ }, // 可以直接修改 state 的值
increment: counter.increment, // 可以引用 store 中定义的 action
}
}
}类型提示
在 Vuex 中，TypeScript 的类型提示做得不是很好，在进行类型推导时，只能找到它的 state。特别是写代码的过程中，代码提示就很不智能。
而 pinia，就能推导出定义的所有 state、getter、action，这样在写代码的时候，就会方便很多。
主要是 pinia 通过 TypeScript 进行了十分友好的类型定义，感兴趣的可以看看 pinia 的类型定义文件（pinia.d.ts
- Unterstützt zwei Syntaxen zum Erstellen eines Stores:
Options ApiundComposition Api; -
Mutationenlöschen, unterstützen nurstate,getters,actions; Das modulare Design kann die Codeaufteilung gut unterstützen. - Es gibt keine verschachtelten Module, sondern nur das Store-Konzept. li>
- Vollständige
TypeScript-Unterstützung
Unter diesem Vorschlag gibt es einen interessanten Kommentar. Eine einfache Übersetzung: 
Im bestehenden Projekt wurde der folgende Befehl verwendet, um das Pinia-Modul zu installieren. 
rrreee
function verwenden, um einen Store zu erstellen, der setup(). 🎜rrreee🎜🎜Store verwenden🎜🎜🎜Wie bereits erwähnt, bietet Pinia zwei Möglichkeiten, den Store zu verwenden: Sowohl <code>Options Api als auch Composition Api werden perfekt unterstützt. 🎜🎜🎜Options Api🎜🎜🎜In Options Api können Sie direkt die offiziell bereitgestellten Methoden mapActions und mapState verwenden, um den Status in zu exportieren Store, Getter und Action, ihre Verwendung ist im Grunde die gleiche wie bei Vuex, und der Einstieg ist einfach. 🎜rrreee🎜🎜Composition Api🎜🎜🎜Composition Api, sowohl der Status als auch der Getter müssen über die Methode computed auf Änderungen warten, die mit der Methode Options Api identisch ist code> muss aus demselben Grund im berechneten-Objekt platziert werden. Darüber hinaus kann der in Options Api erhaltene Statuswert direkt geändert werden. Es wird natürlich empfohlen, eine Aktion zum Betreiben des Statuswerts zu schreiben, um die spätere Wartung zu erleichtern. 🎜rrreee🎜🎜Typhinweise🎜🎜🎜In Vuex sind die Typhinweise von TypeScript nicht sehr gut. Bei der Typableitung können Sie nur den Status ermitteln. Insbesondere beim Schreiben von Code sind die Code-Eingabeaufforderungen sehr unintelligent. 🎜🎜
🎜🎜Und Mit Pinia können Sie alle definierten Zustände, Getter und Aktionen ableiten, was beim Schreiben von Code viel praktischer ist. 🎜🎜
🎜🎜🎜🎜 Hauptsächlich hat Pinia TypeScript bestanden hat eine sehr benutzerfreundliche Typdefinition. Wenn Sie interessiert sind, können Sie sich die Typdefinitionsdatei von Pinia ansehen (pinia.d.ts): 🎜🎜🎜🎜🎜🎜Code-Splitting🎜🎜🎜Aufgrund von Die Verwendung von Modulen Aufgrund des zentralisierten Designs können alle Filialen einzeln eingeführt werden, anstatt alle Module über Module wie vuex in einem Filiale zusammenzufassen. 🎜🎜Angenommen, wir erstellen derzeit einen Store über Vuex. Unter diesem Store gibt es zwei Module, nämlich das Benutzermodul (Benutzer) und das Produktmodul (Waren). Selbst wenn die aktuelle Homepage nur Benutzerinformationen verwendet, wird der gesamte Store in den js-Block der Homepage gepackt. 🎜🎜🎜🎜🎜🎜🎜Wenn wir Pinia verwenden, definieren wir mit defineStore zwei völlig getrennte Geschäfte. Wenn die beiden Seiten eingeführt werden, wirken sie sich nicht gegenseitig aus. Bei der endgültigen Verpackung werden der js-Teil der Homepage und der js-Teil der Produktseite jeweils in die entsprechenden Stores gepackt.
Die Einführung von Pinia endet hier. Wenn neue Projekte mit Vue3 entwickelt werden müssen, wird empfohlen, Pinia ohne Gehirn zu verwenden. Es ist prägnanter und nur 1 KB groß.
Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !
