Vuex 개선 학습 공유

小云云원래의: 2018-01-13 13:13:441430검색

이 글은 주로 Vuex 개선 학습 챕터를 소개하고 있는데, 편집자가 보기에는 꽤 좋다고 생각해서 지금 공유하고 참고하겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바라겠습니다.

이전 기사에서는 몇 가지 간단한 작업을 통해 store.js의 데이터 개체를 변경하는 방법에 대해 이야기했습니다. 실제 작업에서는 이는 작업 요구 사항을 완전히 충족할 수 없으므로 이 기사에서는 수행 방법에 대해 설명합니다. 몇 가지 간단한 조치.

자체 제작 vuex LOGO

1. 예를 들어, 지금은 count < 5일 때 count를 멈추라는 요구사항이 있습니다. 이를 위해서는 작업이 필요합니다

프로세스 판단 및 비동기 요청 등 실행할 작업을 정의하는 작업

store.js의 작업

// 定义 actions ，要执行的动作，如流程的判断、异步请求
const actions ={
  increment({commit,state}){
    commit(&#39;increment&#39;) 
  },
  decrement({ commit, state }) {
    // **通过动作改变的数据，在此处来做判断是否提交**
    if (state.count > 5) {
      commit(&#39;decrement&#39;)
    }
  }
}

프로젝트 실행

2. 작업 전달 비동기 요청 시뮬레이션

1. 먼저 App.vue

<template>
 <p id="app">
  <button @click="increment">增加</button>
  <button @click="decrement">减少</button>
  //异步请求事件
  <button @click="incrementAsync">异步增加</button>
  <h1>{{count}}</h1>
 </p>
</template>

<script>
import {mapGetters,mapActions} from &#39;vuex&#39;
export default {
 name: &#39;app&#39;,
 computed:mapGetters([
  &#39;count&#39;
 ]),
 methods:mapActions([
  &#39;increment&#39;,
  &#39;decrement&#39;,
  &#39;incrementAsync&#39;
 ])
}
</script>

2에서 이벤트를 정의합니다. store.js

// 定义 actions ，要执行的动作，如流程的判断、异步请求
const actions ={
  increment({commit,state}){
    commit(&#39;increment&#39;) 
  },
  decrement({ commit, state }) {
    // **通过动作改变的数据，在此处来做判断是否提交**
    if (state.count > 5) {
      commit(&#39;decrement&#39;)
    }
  },
  incrementAsync({commit,state}){
    // 模拟异步操作
    var a = new Promise((resolve,reject) => {
      setTimeout(() => {
        resolve();
      }, 3000);
    })
    // 3 秒之后提交一次 increment ，也就是执行一次 increment 
    a.then(() => {
      commit(&#39;increment&#39;)
    }).catch(() => {
      console.log(&#39;异步操作失败&#39;);
    })
  }
}

프로젝트 실행

에 비동기 Promise 이벤트를 추가합니다. 3. 데이터 상태 가져오기

데이터의 홀수와 짝수를 알아야 한다면 getter에서 이를 판단해야 합니다.

Getter는 처리된 데이터를 얻어 상태를 확인할 수 있습니다.

store.js의 게터에 홀수와 짝수를 확인하는 메서드를 추가합니다.

var getters={
  count(state){
    return state.count
  },
  EvenOrOdd(state){
    return state.count%2==0 ? &#39;偶数&#39; : &#39;奇数&#39;
  }
}

App.vue에

<template>
 <p id="app">
  <button @click="increment">增加</button>
  <button @click="decrement">减少</button>
  <button @click="incrementAsync">异步增加</button>
  <h1>{{count}}</h1>
  <!-- 判断奇偶数的方法 这种写法它会自动调用 EvenOrOdd 方法中的返回值，拿到的是个属性 -->
  <h1>{{EvenOrOdd}}</h1>
 </p>
</template>

<script>
import {mapGetters,mapActions} from &#39;vuex&#39;
export default {
 name: &#39;app&#39;,
 computed:mapGetters([
  // 判断奇偶数的方法
  &#39;EvenOrOdd&#39;,
  &#39;count&#39;
 ]),
 methods:mapActions([
  &#39;increment&#39;,
  &#39;decrement&#39;,
  &#39;incrementAsync&#39;
 ])
}
</script>

를 추가하세요. 홀수와 짝수를 판단해 보세요.gif

이해가 안 되는 부분이 있으면 메시지를 남겨서 소통하거나 API를 직접 찾아보세요

Vuex 개선 학습 공유

관련 기사