Vue による Redux の使用方法

この記事は主に Vue で Redux を使用する方法を紹介します。非常に優れた内容なので、参考にしてください。

先週末、Vuex のソースコードを見ていて、突然インスピレーションが湧きました。なぜすべて Vuex なのでしょうか?

そこで、私は午後中ずっと、Vue が Redux を使用できるようにするプラグインを書きました

Gayhub URL

Vue-with-Redux

これは、Vue が Redux を使用して管理できるようにするプラグインです状態プラグイン。 Redux は非常に人気のある状態管理ツールです。 vue-with-redux は、Vue 環境で Redux を使用する方法を提供します。今回は異なる開発体験がもたらされます。

開始

まず、次のコマンドを使用して vue-with-redux をインストールする必要があります

npm install -save vue-with-redux

デモを実行

 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 中国語 Web サイトをご覧ください。

関連する推奨事項:

Vueルートインターセプトとページジャンプ設定方法の紹介

Vueデータではアロー関数解析が使用できません

以上がVue による Redux の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。