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 &#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>

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!