vuex를 사용하여 상태 객체를 작동하는 방법

이번에는 vuex를 사용하여 상태 객체를 조작하는 방법과 vuex를 사용하여 상태 객체를 조작할 때 어떤 주의사항이 있는지 보여드리겠습니다. 다음은 실제 사례입니다.

Vuex란 무엇인가요?

VueX는 Vue.js 애플리케이션을 위해 특별히 설계된 상태 관리 아키텍처입니다. 각 vue 구성 요소의 변경 가능한 상태를 균일하게 관리하고 유지합니다(vue 구성 요소의 특정 데이터로 이해할 수 있습니다).

Vue에는 상태, 게터, 돌연변이, 액션, 모듈이라는 다섯 가지 핵심 개념이 있습니다.

Summary

state => 기본 데이터
getters => 기본 데이터에서 파생된 데이터
mutations => 변경된 데이터를 제출하는 방식, 동기화!
actions => 데코레이터처럼 돌연변이를 래핑하여 비동기화합니다.
modules => ModularityVuex

State

state는 Vuex의 기본 데이터입니다!

단일 상태 트리

Vuex는 단일 상태 트리를 사용합니다. 즉, 하나의 개체에 모든 상태 데이터가 포함됩니다. 생성자 옵션으로서 state는 필요한 모든 기본 상태 매개변수를 정의합니다.

Vue 구성 요소에서 Vuex 속성 가져오기

•다음과 같이 Vue의 Computed를 통해 Vuex의 상태를 가져올 수 있습니다.

const store = new Vuex.Store({
  state: {
    count:0
  }
})
const app = new Vue({
  //..
  store,
  computed: {
    count: function(){
      return this.$store.state.count
    }
  },
  //..
})

상태 객체를 작동하는 vuex의 예제 코드를 살펴보겠습니다

store.state. 개수가 변경될 때마다 계산된 속성이 다시 계산되고 관련 DOM이 업데이트됩니다.

모든 Vuex 애플리케이션의 핵심은 매장(창고)입니다.

vuex를 설명하기 위해 공식 문서에서 두 문장을 인용합니다.

1. Vuex의 상태 저장소는 반응형입니다. Vue 구성 요소가 저장소에서 상태를 읽을 때 저장소의 상태가 변경되면 해당 구성 요소가 그에 따라 효율적으로 업데이트됩니다.

2. 매장에서는 직접 상태를 변경할 수 없습니다. 저장소의 상태를 변경하는 유일한 방법은 명시적으로 변형을 커밋하는 것입니다. 이를 통해 모든 상태 변경을 쉽게 추적할 수 있으며 애플리케이션을 더 잘 이해하는 데 도움이 되는 몇 가지 도구를 구현할 수 있습니다.

vuex에서 상태

1을 사용하고 루트 구성 요소에 store를 도입하면 하위 구성 요소는 this.$store.state.data 이름을 통해 이 전역 속성을 얻을 수 있습니다.

vue-cli를 사용하여 만든 프로젝트 App.vue는 루트 컴포넌트

App.vue 코드

<template>
 <p id="app">
   <h1>{{$store.state.count}}</h1>  
  <router-view/>
 </p>
</template>
<script>
 import store from '@/vuex/store';
export default {
 name: 'App',
 store
}
</script>
<style>
</style>

Count.vue 코드는 컴포넌트 폴더

<template>
 <p>
   <h3>{{this.$store.state.count}}</h3>
 </p>
</template>
<script> 
  export default {
    name:'count'，
  }
</script>
<style scoped>
</style>

store.js 코드

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state = {
 count: 1
}
export default new Vuex.Store({
 state，
})

2, 전역 속성 획득 mapState 보조 함수를 통해

이 방법의 장점은 속성 이름을 통해 속성 값을 직접 얻을 수 있다는 것입니다.

Component.vue의 코드 변경

<template>
 <p>
   <h3>{{this.$store.state.count}}--{{count}}</h3>
  <h4>{{index2}}</h4>
 </p>
</template>
<script> 
  import { mapState,mapMutations,mapGetters } from "vuex";
  export default {
    name:'count',
    data:function(){
      return {
        index:10
      }
    },
    //通过对象展开运算符vuex里的属性可以与组件局部属性混用。
    computed:{...mapState(['count']),
      index2() {
        return this.index+30;
      }  
    } ,
  }
</script>
<style scoped>
</style>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

vue에서 필터를 사용하는 방법

vue를 사용하여 dom의 클래스를 결정하는 방법

위 내용은 vuex를 사용하여 상태 객체를 작동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!