Vue3은 새로운 반응형 시스템을 채택하고 새로운 Composition API 세트를 구축합니다. Vue를 둘러싼 생태계는 이 새로운 시스템에 적응하기 위한 노력을 강화하고 있으며 공식 상태 관리 라이브러리 Vuex도 이에 적응하고 있습니다. 이러한 이유로 관계자는 Vuex 5에 대한 새로운 제안을 내놓았습니다. [관련 권장사항: "vue.js 튜토리얼"]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
- 스토어 생성을 위한 두 가지 구문을 지원합니다.
옵션 Api및Composition Api; -
변형삭제,상태만 지원,getters,actions; - 모듈식 디자인은 코드 분할을 잘 지원합니다.
- 중첩된 모듈은 없으며 Store 개념만 있습니다. li>
- 완전한
TypeScript지원
이 제안에 흥미로운 의견이 있습니다. 간단한 번역: 
기존 프로젝트에서는 Pinia 모듈을 설치하기 위해 다음 명령을 사용했습니다. 
rrreee
function 형식을 사용하여 와 다소 유사한 스토어를 생성할 수도 있습니다. >setup(). 🎜rrreee🎜🎜스토어 사용하기🎜🎜🎜앞서 소개드린 것처럼 피니아는 스토어를 사용하는 두 가지 방법을 제공하는데, <code>Options Api와 Composition Api 모두 완벽하게 지원됩니다. 🎜🎜🎜Options Api🎜🎜🎜Options Api에서는 공식적으로 제공되는 mapActions 및 mapState 메서드를 직접 사용하여 store, getter 및 action의 사용법은 기본적으로 Vuex와 동일하며 시작하기 쉽습니다. 🎜rrreee🎜🎜Composition Api🎜🎜🎜Composition Api, 상태와 getter 모두 computed 메서드를 통해 변경 사항을 수신 대기해야 하며 이는 Options Api와 동일합니다. code> 같은 이유로 computed 객체에 배치해야 합니다. 또한, Options Api에서 얻은 상태 값을 직접 수정할 수 있음은 물론, 추후 유지 관리를 용이하게 하기 위해 상태 값을 조작하는 액션을 작성하는 것이 좋습니다. 🎜rrreee🎜🎜타입 힌트🎜🎜🎜Vuex에서 TypeScript의 타입 힌트는 타입 파생을 할 때 그 상태만 알 수 있는 것이 아닙니다. 특히 코드를 작성하는 과정에서 코드 프롬프트는 매우 지능적이지 않습니다. 🎜🎜
🎜🎜그리고 pinia를 사용하면 정의된 상태, 게터, 액션을 모두 추론할 수 있어 코드 작성 시 훨씬 편리해집니다. 🎜🎜
🎜🎜🎜🎜 주로 피니아가 TypeScript를 통과했습니다. 매우 친숙한 유형 정의가 있습니다. 관심이 있으시면 pinia의 유형 정의 파일(pinia.d.ts)을 살펴보세요. 🎜🎜🎜🎜🎜🎜코드 분할🎜🎜🎜 모듈의 사용 중앙 집중식 설계로 인해 vuex와 같은 모듈을 통해 모든 모듈을 하나의 스토어에 탑재하는 대신 모든 스토어를 개별적으로 도입할 수 있습니다. 🎜🎜현재 Vuex를 통해 Store를 생성한다고 가정해 보겠습니다. 이 Store에는 사용자 모듈(User)과 제품 모듈(Goods)이라는 두 개의 모듈이 있습니다. 현재 홈페이지가 사용자 정보만 사용하더라도 스토어 전체가 홈페이지의 js 덩어리로 패키징됩니다. 🎜🎜🎜🎜🎜🎜🎜피니아를 사용하는 경우 defineStore를 사용하여 완전히 별개의 두 매장을 정의하게 되며, 두 페이지가 소개될 때 서로 영향을 주지 않습니다. 최종 패키징 과정에서 홈페이지의 js 청크와 상품 페이지의 js 청크가 각각 해당 스토어에 패키징됩니다.
Vue3를 사용하여 개발해야 하는 새로운 프로젝트가 있는 경우 Pinia를 사용하는 것이 더 간결하고 크기가 1KB에 불과합니다.
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !