기본 Vuex 스토어 예제

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

Vuex는 Vue 앱과 함께 작동하도록 만들어진 하나의 상태 관리입니다.

그것을 사용하려면 다음을 실행하여 설치합니다.

npm i vuex

그런 다음 Vuex 플러그인을 등록하고 다음을 사용하여 기본 Vuex 저장소를 만들 수 있습니다.

import Vue from "vue";
import App from "./App.vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

Vue.config.productionTip = false;

new Vue({
  store,
  render: h => h(App)
}).$mount("#app");

저장소는 Vuex.Store 생성자로 생성됩니다."

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

생성자에 전달한 객체에는 state 속성이 있고 그 안에 count 상태가 있습니다.
count의 초기값은 0입니다.
mutations 속성에는 상태를 변경하는 메서드가 있습니다.
increment 매개변수를 사용하는 state 메서드가 있습니다.

그 위에 있는 state 속성과 동일한 내용을 가지고 있습니다.

따라서 state.count++를 실행하여 count 상태의 값을 증가시킬 수 있습니다.

앱의 나머지 부분에서 스토어를 사용할 수 있도록 하기 위해 store 생성자에 전달한 객체에 Vue를 넣습니다.

그런 다음 구성 요소에서 다음과 같이 저장소를 사용할 수 있습니다.

<template>
  <div id="app">
    <button @click="increment">Increment</button>
    <p>{{count}}</p>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit("increment");
    }
  }
};
</script>

Vuex 스토어인 this.$store 가 있습니다. Vuex 플러그인을 등록하고 store를 Vue 생성자에 전달한 객체에 넣었기 때문에 이 객체가 있습니다.
this.$store.state.count에는 count 상태 값이 있습니다.

그리고 this.$store.commit 값을 저장소에 커밋할 수 있습니다.
'increment'는 increment 생성자에 전달하는 객체의 mutations 속성에서 Vuex.Store 메서드를 호출한다는 것을 나타냅니다.

또한 호출할 증가 버튼이 있습니다increment.

이제 버튼을 클릭하면 버튼 아래에 표시된 count 값이 올라가는 것을 볼 수 있습니다.
commit 메서드는 페이로드인 두 번째 인수를 사용합니다.

따라서 다음과 같이 작성할 수 있습니다.

import Vue from "vue";
import App from "./App.vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state, payload) {
      state.count += payload;
    }
  }
});

Vue.config.productionTip = false;

new Vue({
  store,
  render: h => h(App)
}).$mount("#app");

쓰기:

<template>
  <div id="app">
    <button @click="increment">Increment</button>
    <p>{{count}}</p>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit("increment", 2);
    }
  }
};
</script>

클릭할 때 1 대신 2씩 증가합니다.

우리는 다음을 가지고 있습니다:

this.$store.commit("increment", 2);

대신에:

this.$store.commit("increment");

그리고:

mutations: {
  increment(state, payload) {
   state.count += payload;
  }
}

대신에:

mutations: {
  increment(state,) {
    state.count ++;
  }
}

payload는 우리가 전달한 2입니다.

기본 Vuex 스토어를 사용하면 앱 전체의 상태를 쉽게 저장할 수 있습니다.

상태를 설정하고 $this.store.state 속성을 통해 저장소에서 상태를 가져오기 위해 돌연변이를 커밋하기만 하면 됩니다.

계산된 속성의 최신 값을 반환하여 사용할 수 있습니다.