Comment Vue utilise Redux

Cet article présente principalement comment utiliser Redux avec Vue. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

En regardant le code source de Vuex le week-end dernier, j'ai soudainement eu une inspiration, pourquoi est-ce que tout est Vuex ?

J'ai donc écrit un plug-in tout l'après-midi pour aider Vue à utiliser Redux

Url Gayhub

Vue -with-Redux

Il s'agit d'un plugin pour aider Vue à utiliser Redux pour gérer l'état. Redux est un outil de gestion d'état très populaire. vue-with-redux vous offre un moyen d'utiliser Redux dans l'environnement Vue. Cette fois apporte une expérience de développement différente.

Démarrer

Vous devez d'abord installer vue-with-redux via la commande suivante

npm install -save vue-with-redux

Exécuter la démo

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

Utilisation

Vous devez modifier votre fichier d'entrée comme suit :

 // 有可能是你的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')

Ce qui suit est une fonction 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);
 }
 }

Remarque : Vous n'avez pas besoin d'utiliser redux-thunk, car Vue -with-Redux Fournit déjà la prise en charge du traitement asynchrone.

Voici un exemple de réducteur :

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

 export default {
 reduce
 };

Exemple de composant 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>

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Présentation des paramètres d'interception d'itinéraire de vue et de saut de page

Les flèches ne peuvent pas être utilisées dans les données de vue Problème analyse des fonctions

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!