讓Vue也可以使用Redux的方法

更新時(shí)間：2018年05月23日 13:46:50 作者：YaHuiLiang(Ryou)

這篇文章主要介紹了讓Vue也可以使用Redux的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

上周末看Vuex源碼，突發(fā)靈感，為什么都是Vuex啊。

于是蛋疼一下午寫了一個(gè)插件來幫助Vue可以使用Redux

Gayhub Url

Vue-with-Redux

這是一個(gè)用于幫助Vue使用Redux管理狀態(tài)的插件。Redux是一個(gè)非常流行的狀態(tài)管理工具。vue-with-redux為大家提供一個(gè)可以在Vue環(huán)境下使用Redux的途徑。這回帶來不同的開發(fā)體驗(yàn)。

開始

首先你需要通過如下命令安裝vue-with-redux

npm install -save vue-with-redux

運(yùn)行Demo

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

Usage

需要像下面這樣改造你的入口文件：

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

下面是一個(gè)actionCreate函數(shù):

 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);
 }
 }

Note: 你并不需要使用redux-thunk，因?yàn)閂ue-with-Redux已經(jīng)提供了對(duì)異步處理的支持.

這是一個(gè)reducer的例子:

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

 export default {
 reduce
 };

Vue的組件例子:

 <template>
 <div>
  <button @click="clickHandler1">Action Object</button>
  <button @click="clickHandler2">Sync Action</button>
  <button @click="clickHandler3">Async Action</button>
  <p>{{reduce.count}}</p>
 </div>
 </template>

 <script>
 import { test, asyncTest } from './../actions';

 export default {
 name: 'HelloWorld',
 props: {
  msg: String
 },
 // 你必須在這里預(yù)先定義你訂閱的Redux中的狀態(tài)。否則編譯模版會(huì)報(bào)錯(cuò)。
 data() {
  return {
  reduce: {}
  }
 },
 methods: {
  clickHandler1() {
  this.dispatch({type: 'TEST'});
  },
  clickHandler2() {
  this.dispatch(test());
  },
  clickHandler3() {
  this.dispatch(asyncTest());
  },
  // 你必須實(shí)現(xiàn)一個(gè)mapReduxState函數(shù)，用于告訴Vue-with-Redux你需要訂閱哪些redux中的狀態(tài)
  // [ state ] 參數(shù)就是redux狀態(tài)樹的根。
  mapReduxState(state) { 
  return {
   reduce: state.reduce
  }
  },
 }
 }
 </script>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: