vue3에서 vuex의 사용법은 무엇입니까-View.js-php.cn

vue3에서 vuex의 사용법은 무엇입니까

WBOY

풀어 주다： 2022-02-25 14:57:05

원래의

9921명이 탐색했습니다.

vue3에서는 vuex가 모든 구성요소의 상태를 저장하고 관리하는 데 사용됩니다. 이는 "vue.js" 애플리케이션용으로 특별히 개발된 상태 관리 모드입니다. vuex의 데이터를 변경하려면 돌연변이의 메서드를 제출하는 데 사용할 수 있습니다.

vue3에서 vuex의 사용법은 무엇입니까

이 기사의 운영 환경: Windows 10 시스템, Vue3 버전, DELL G3 컴퓨터.

vue3에서 vuex의 사용법은 무엇인가요?

Vuex는 Vue.js 애플리케이션용으로 특별히 개발된 상태 관리 패턴 + 라이브러리입니다. 중앙 집중식 저장소를 사용하여 애플리케이션의 모든 구성 요소 상태를 관리하고 해당 규칙을 사용하여 상태가 예측 가능한 방식으로 변경되도록 합니다.

vuex는 중대형 프로젝트에서 널리 사용됩니다. 일반적으로 전역적으로 사용되는 데이터는 다른 페이지의 사용을 용이하게 하기 위해 vuex에 배치됩니다. 프로젝트에서 vuex에 저장된 대부분의 데이터는 user_id, 권한 및 기타 정보와 관련됩니다. 관련이 있으므로 vue3에서 vuex를 사용하는 방법은 무엇입니까? 이 문제에 대해 이번 글에서는 함께 분석해보겠습니다

사실 vue3에서 vuex를 사용하는 것과 vue2에서 vuex를 사용하는 것은 거의 동일합니다. 둘 다 상태를 통해 데이터를 저장하고 돌연변이를 통해 vuex에서 데이터를 변경합니다. 비동기 상황의 경우 vuex의 데이터를 변경하는 작업을 통해 mutation에 메서드를 제출합니다. 이 아이디어로 vue3에서 vuex를 함께 사용해 보겠습니다

코드 작성을 시작하기 전에 내 디렉터리 구조를 살펴보겠습니다. put vuex 다음과 같은 ts 파일로 나누어져 있습니다

index.ts에서 이들 모듈이 노출하는 메소드를 해당 모듈에 할당합니다

1. vuex에 저장된 데이터를 활용하는 방법

State는 vue2와 같고, 데이터를 저장하는 곳이고, 쓰는 방법도 똑같습니다. 여기서는 0

const state = {
  count: 0,
}
export { state }

로그인 후 복사

로 초기화된 count 속성을 정의합니다. 이때 vue3에서는 다음과 같이 사용합니다. vuex의 useStore 함수를 소개합니다. 반환 값은 vuex 인스턴스입니다

<template>
  <h1>vuex中的数据{{ store.state.count }}</h1>
</template>
<script lang="ts">
import { defineComponent } from "vue"
import { useStore } from "vuex"
export default defineComponent({
  name: "index",
  setup() {
    const store = useStore()
    return { store }
  },
})
</script>

로그인 후 복사

콘솔에서 이 저장소를 인쇄하면 저장소의 일부 속성을 볼 수 있습니다. 이는 getter, dispatch, state 및 를 포함하는 vuex 인스턴스임이 분명합니다. 다른 속성

2. vuex에서 속성을 변경하는 방법

그렇다면 구체적으로 어떻게 사용할까요? 먼저 mutations의 쓰기 방법을 살펴보겠습니다.

const mutations = {
  addCount(state, payload) {
    state.count += payload
  },
}
export { mutations }

로그인 후 복사

여기서는 addCount 메서드가 정의됩니다. 이 메서드는 두 개의 매개 변수를 허용합니다. (물론 직접 작성할 수도 있습니다. state.count를 호출한 다음 직접 state += payload in mutations),

두 번째 매개변수는 +1 연산과 같이 변경될 데이터입니다.

<template>
  <h1>vuex中的数据{{ store.state.count }}</h1>
  <button @click="changeStoreCount">改变vuex数据</button>
</template>
<script lang="ts">
import { defineComponent } from "vue"
import { useStore } from "vuex"
export default defineComponent({
  name: "index",
  setup() {
    const store = useStore()
    console.log(store)
    const changeStoreCount = () => {
      // 在这里提交了mutations中的addCount方法
      store.commit("addCount", 1)
    }
    return { store, changeStoreCount }
  },
})
</script>
<style scoped></style>

로그인 후 복사

3 vuex 데이터를 비동기적으로 변경하는 방법.

vue2에서 액션은 디스패치 -> mutations의 메소드를 통해 구현됩니다. 이는 vue3의 경우에도 마찬가지입니다. 그러나 vue3의 액션의 첫 번째 매개변수는 고정되어 있으며 현재 vuex의 인스턴스입니다. 네, 두 번째 매개변수는 연산할 데이터입니다. 여기서 작성자는 +2 연산

const actions = {
  asyncAddStoreCount(store, payload) { // 第一个参数是vuex固定的参数，不需要手动去传递
    store.commit("addCount", payload)
  },
}
export { actions }

로그인 후 복사

<template>
  <h1>vuex中的数据{{ store.state.count }}</h1>
  <button @click="changeStoreCount">改变vuex数据</button>
  <button @click="asyncChangeStoreCount">异步改变vuex数据</button>
</template>
<script lang="ts">
import { defineComponent } from "vue"
import { useStore } from "vuex"
export default defineComponent({
  name: "index",
  setup() {
    const store = useStore()
    console.log(store)
    const changeStoreCount = () => {
      store.commit("addCount", 1)
    }
    const asyncChangeStoreCount = () => {
      setTimeout(() => {
   // asyncAddStoreCount是mutations中的方法，2是传递过去的数据
   // 异步改变vuex用dispatch方法，这里用setTimeout模拟异步操作
        store.dispatch("asyncAddStoreCount", 2)
      }, 1000)
    }
    return { store, changeStoreCount, asyncChangeStoreCount }
  },
})
</script>
<style scoped></style>

로그인 후 복사

Rendering:

1. 이니셜: