讓Vue也可以使用Redux的方法
上周末看Vuex源碼,突發(fā)靈感,為什么都是Vuex啊。
于是蛋疼一下午寫了一個插件來幫助Vue可以使用Redux
Vue-with-Redux
這是一個用于幫助Vue使用Redux管理狀態(tài)的插件。Redux是一個非常流行的狀態(tài)管理工具。vue-with-redux為大家提供一個可以在Vue環(huán)境下使用Redux的途徑。這回帶來不同的開發(fā)體驗。
開始
首先你需要通過如下命令安裝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函數(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,因為Vue-with-Redux已經(jīng)提供了對異步處理的支持.
這是一個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)。否則編譯模版會報錯。 data() { return { reduce: {} } }, methods: { clickHandler1() { this.dispatch({type: 'TEST'}); }, clickHandler2() { this.dispatch(test()); }, clickHandler3() { this.dispatch(asyncTest()); }, // 你必須實現(xiàn)一個mapReduxState函數(shù),用于告訴Vue-with-Redux你需要訂閱哪些redux中的狀態(tài) // [ state ] 參數(shù)就是redux狀態(tài)樹的根。 mapReduxState(state) { return { reduce: state.reduce } }, } } </script>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue實現(xiàn)路由跳轉(zhuǎn)的3種方式超詳細(xì)分解
Vue.js是一款流行的前端JavaScript框架,它提供了多種方式來實現(xiàn)路由跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)路由跳轉(zhuǎn)的3種方式,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12Vue組件間通信方法總結(jié)(父子組件、兄弟組件及祖先后代組件間)
這篇文章主要給大家介紹了關(guān)于Vue組件間通信的相關(guān)資料,其中包括父子組件、兄弟組件及祖先后代組件間的通信,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue獲取DOM元素并設(shè)置屬性的兩種實現(xiàn)方法
下面小編就為大家?guī)硪黄獀ue獲取DOM元素并設(shè)置屬性的兩種實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09vue 內(nèi)置過濾器的使用總結(jié)(附加自定義過濾器)
這篇文章主要介紹了vue 內(nèi)置過濾器的使用總結(jié)(附加自定義過濾器),詳細(xì)的介紹了各種過濾器的使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12