Vue3의 새로운 상태 관리 도구인 Pinia를 공유하세요-View.js-php.cn

이 글에서는 새로운 Vue3 상태 관리 도구인 Pinia에 대해 소개하겠습니다. Pinia 도구의 설치 및 사용에 대해 이야기해 보겠습니다. 이것이 모든 사람에게 도움이 되기를 바랍니다.

새로운 Vue3 상태 관리 도구: Pinia

Vue3은 새로운 반응형 시스템을 채택하고 새로운 Composition API 세트를 구축합니다. Vue를 둘러싼 생태계는 이 새로운 시스템에 적응하기 위한 노력을 강화하고 있으며 공식 상태 관리 라이브러리 Vuex도 이에 적응하고 있습니다. 이러한 이유로 관계자는 Vuex 5에 대한 새로운 제안을 내놓았습니다. [관련 권장사항: "vue.js 튜토리얼"]Composition API。Vue 的周边生态都在加紧适配这套新的系统，官方的状态管理库 Vuex 也在适配中，为此官方提出了一个 Vuex 5 的全新提案。【相关推荐：《vue.js教程》】

Vue3의 새로운 상태 관리 도구인 Pinia를 공유하세요

支持两种语法创建 Store：Options Api 和 Composition Api；
删除 mutations，只支持 state、getters、actions；
模块化的设计，能很好支持代码分割；
没有嵌套的模块，只有 Store 的概念；
完整的 TypeScript 支持；

在这个提案下方，有个评论很有意思。简单翻译一下：

Vue3의 새로운 상태 관리 도구인 Pinia를 공유하세요

好巧不巧，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。特别是写代码的过程中，代码提示就很不智能。

Vue3의 새로운 상태 관리 도구인 Pinia를 공유하세요

而 pinia，就能推导出定义的所有 state、getter、action，这样在写代码的时候，就会方便很多。

Vue3의 새로운 상태 관리 도구인 Pinia를 공유하세요

主要是 pinia 通过 TypeScript 进行了十分友好的类型定义，感兴趣的可以看看 pinia 的类型定义文件（pinia.d.ts

스토어 생성을 위한 두 가지 구문을 지원합니다. 옵션 Api 및 Composition Api;
변형 삭제, 상태만 지원, getters, actions;
모듈식 디자인은 코드 분할을 잘 지원합니다.
중첩된 모듈은 없으며 Store 개념만 있습니다. li>
완전한 TypeScript 지원

이 제안에 흥미로운 의견이 있습니다. 간단한 번역:

Vue3의 새로운 상태 관리 도구인 Pinia를 공유하세요 정말 우연이군요, Vuex5 제안은 Pinia가 구현한 기능과 아무런 관련이 없다고 할 수 없으며, 오늘의 기사에서는 이 파인애플을 소개하겠습니다.

설치

기존 프로젝트에서는 Pinia 모듈을 설치하기 위해 다음 명령을 사용했습니다. Vue3의 새로운 상태 관리 도구인 Pinia를 공유하세요 rrreee

설치가 완료되면 Vue3 프로젝트의 엔트리 파일에 import해서 설치해야 합니다.

rrreee Vue3의 새로운 상태 관리 도구인 Pinia를 공유하세요

시작하기🎜🎜🎜 Pinia를 사용하려면 스토어를 정의한 다음 데이터가 사용되는 위치로 가져오기만 하면 됩니다. 🎜🎜🎜Define Store🎜🎜rrreee🎜위의 vuex와 유사한 방법을 사용하여 상태를 구축하는 것 외에도 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의 타입 힌트는 타입 파생을 할 때 그 상태만 알 수 있는 것이 아닙니다. 특히 코드를 작성하는 과정에서 코드 프롬프트는 매우 지능적이지 않습니다. 🎜🎜 Vue3의 새로운 상태 관리 도구인 Pinia를 공유하세요

🎜🎜그리고 pinia를 사용하면 정의된 상태, 게터, 액션을 모두 추론할 수 있어 코드 작성 시 훨씬 편리해집니다. 🎜🎜 Vue3의 새로운 상태 관리 도구인 Pinia를 공유하세요

🎜🎜🎜🎜 주로 피니아가 TypeScript를 통과했습니다. 매우 친숙한 유형 정의가 있습니다. 관심이 있으시면 pinia의 유형 정의 파일(pinia.d.ts)을 살펴보세요. 🎜🎜🎜🎜🎜🎜코드 분할🎜🎜🎜 모듈의 사용 중앙 집중식 설계로 인해 vuex와 같은 모듈을 통해 모든 모듈을 하나의 스토어에 탑재하는 대신 모든 스토어를 개별적으로 도입할 수 있습니다. 🎜🎜현재 Vuex를 통해 Store를 생성한다고 가정해 보겠습니다. 이 Store에는 사용자 모듈(User)과 제품 모듈(Goods)이라는 두 개의 모듈이 있습니다. 현재 홈페이지가 사용자 정보만 사용하더라도 스토어 전체가 홈페이지의 js 덩어리로 패키징됩니다. 🎜🎜🎜🎜🎜🎜🎜

피니아를 사용하는 경우 defineStore를 사용하여 완전히 별개의 두 매장을 정의하게 되며, 두 페이지가 소개될 때 서로 영향을 주지 않습니다. 최종 패키징 과정에서 홈페이지의 js 청크와 상품 페이지의 js 청크가 각각 해당 스토어에 패키징됩니다.

Vue3의 새로운 상태 관리 도구인 Pinia를 공유하세요