Vue가 Redux를 사용하는 방법

이 글은 주로 Vue와 함께 Redux를 사용하는 방법을 소개합니다. 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.

지난 주말 Vuex 소스코드를 보다가 갑자기 영감이 떠올랐는데 왜 다 Vuex일까요?

그래서 저는 Vue가 Redux를 사용할 수 있도록 오후 내내 플러그인을 작성했습니다

Gayhub Url

Vue-with-Redux

Vue가 Redux를 사용하여 관리할 수 있도록 도와주는 플러그인입니다 상태 플러그인. Redux는 매우 인기 있는 상태 관리 도구입니다. vue-with-redux는 Vue 환경에서 Redux를 사용하는 방법을 제공합니다. 이번에는 다른 개발 경험을 제공합니다.

Start

먼저 다음 명령을 통해 vue-with-redux를 설치해야 합니다

npm install -save vue-with-redux

Demo

 git clone https://github.com/ryouaki/vue-with-redux.git
 npm install
 npm run serve

사용법

다음과 같이 항목 파일을 변환해야 합니다:

 // 有可能是你的entry.js文件
 ... // 这里是你引入的其它包
 import VuexRedux from 'vue-with-redux';
 import { makeReduxStore } from 'vue-with-redux';
 import reduces from 'YOUR-REDUCERS';
 import middlewares from 'REDUX-MIDDLEWARES';

 Vue.use(VuexRedux);

 let store = makeReduxStore(reduces, [middlewares]);

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

다음은 actionCreate 함수입니다:

 export function test() {
 return {
  type: 'TEST'
 }
 }

 export function asyncTest() {
 return (dispatch, getState) => {
  setTimeout( () => {
  console.log('New:', getState());
  dispatch({type: 'TEST'});
  console.log('Old', getState());
  }, 100);
 }
 }

참고: redux-thunk를 사용할 필요가 없습니다. 왜냐하면 Vue-with-Redux는 이미 비동기 처리를 지원합니다.

이것은 감속기의 예입니다:

 function reduce (state = { count: 0 }, action) {
 switch(action.type) {
  case 'TEST':
  state.count++;
  return state;
  default:
  return state;
 }
 }

 export default {
 reduce
 };

Vue 구성 요소 예:

 <template>
 <p>
  <button @click="clickHandler1">Action Object</button>
  <button @click="clickHandler2">Sync Action</button>
  <button @click="clickHandler3">Async Action</button>
  <p>{{reduce.count}}</p>
 </p>
 </template>

 <script>
 import { test, asyncTest } from &#39;./../actions&#39;;

 export default {
 name: &#39;HelloWorld&#39;,
 props: {
  msg: String
 },
 // 你必须在这里预先定义你订阅的Redux中的状态。否则编译模版会报错。
 data() {
  return {
  reduce: {}
  }
 },
 methods: {
  clickHandler1() {
  this.dispatch({type: &#39;TEST&#39;});
  },
  clickHandler2() {
  this.dispatch(test());
  },
  clickHandler3() {
  this.dispatch(asyncTest());
  },
  // 你必须实现一个mapReduxState函数，用于告诉Vue-with-Redux你需要订阅哪些redux中的状态
  // [ state ] 参数就是redux状态树的根。
  mapReduxState(state) { 
  return {
   reduce: state.reduce
  }
  },
 }
 }
 </script>

위는 전체 내용입니다. 이 글이 모든 분들에게 도움이 되었으면 좋겠습니다. 학습에 도움이 되기를 바라며, 더 많은 관련 내용을 보시려면 PHP 중국어 홈페이지를 주목해주세요!

관련 추천 :

Vue 경로 차단 및 페이지 점프 설정 방법 소개

vue 데이터는 화살표 기능 분석을 사용할 수 없습니다

위 내용은 Vue가 Redux를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!