ホームページ > 記事 > ウェブフロントエンド > 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 './../actions'; export default { name: 'HelloWorld', props: { msg: String }, // 你必须在这里预先定义你订阅的Redux中的状态。否则编译模版会报错。 data() { return { reduce: {} } }, methods: { clickHandler1() { this.dispatch({type: 'TEST'}); }, 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 による Redux の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。