讓Vue也可以使用Redux

YaHuiLiang(Ryou)發表於2019-03-04
VueRedux

上週末看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
複製程式碼

執行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`)
複製程式碼

下面是一個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);
    }
  }
複製程式碼

Note: 你並不需要使用redux-thunk，因為Vue-with-Redux已經提供了對非同步處理的支援.

這是一個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
    },
    // 你必須在這裡預先定義你訂閱的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>
複製程式碼

相關文章