Heim > Artikel > Web-Frontend > Wie Vue Redux nutzt
Dieser Artikel stellt hauptsächlich die Verwendung von Redux mit Vue vor. Der Inhalt ist ziemlich gut. Ich werde ihn jetzt mit Ihnen teilen und als Referenz verwenden.
Als ich letztes Wochenende den Vuex-Quellcode betrachtete, hatte ich plötzlich eine Inspiration: Warum ist das alles Vuex?
Also habe ich den ganzen Nachmittag ein Plug-in geschrieben, um Vue bei der Verwendung von Redux zu helfen
Gayhub-URL
Vue -with-Redux
Dies ist ein Plugin, das Vue dabei hilft, Redux zur Statusverwaltung zu verwenden. Redux ist ein sehr beliebtes State-Management-Tool. vue-with-redux bietet Ihnen eine Möglichkeit, Redux in der Vue-Umgebung zu verwenden. Dieses Mal bringt eine andere Entwicklungserfahrung.
Starten
Zuerst müssen Sie vue-with-redux über den folgenden Befehl installieren
npm install -save vue-with-redux
Demo ausführen
git clone https://github.com/ryouaki/vue-with-redux.git npm install npm run serve
Nutzung
Sie müssen Ihre Eintragsdatei wie folgt umwandeln:
// 有可能是你的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')
Das Folgende ist eine actionCreate-Funktion:
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); } }
Hinweis: Sie müssen Redux-Thunk nicht verwenden, da Vue-with-Redux bereits Unterstützung für bietet asynchrone Verarbeitung.
Dies ist ein Beispiel für einen Reduzierer:
function reduce (state = { count: 0 }, action) { switch(action.type) { case 'TEST': state.count++; return state; default: return state; } } export default { reduce };
Vue-Komponentenbeispiel:
<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>
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie im PHP-Chinesisch Webseite!
Verwandte Empfehlungen:
Einführung in die Vue-Routenabfang- und Seitensprungeinstellungen
Pfeile können in Vue-Daten nicht verwendet werden Problem Analyse von Funktionen
Das obige ist der detaillierte Inhalt vonWie Vue Redux nutzt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!