這篇文章主要介紹了讓Vue也可以使用Redux的方法，內容挺不錯的，現在分享給大家，也給大家做個參考。
上週末看Vuex原始碼，突發靈感，為什麼都是Vuex啊。
於是蛋痛一下午寫了一個外掛來幫助Vue可以用Redux
Gayhub Url
Vue-with-Redux
這是用來幫助Vue使用Redux管理狀態的外掛程式。 Redux是一個非常受歡迎的狀態管理工具。 vue-with-redux為大家提供一個可以在Vue環境下使用Redux的途徑。這迴帶來不同的開發體驗。
開始
首先你需要透過以下指令安裝vue-with-redux
##首先你需要透過以下指令安裝vue-with-redux
##npm install -save vue-with-redux
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')
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已經提供了對非同步處理的支援.
function reduce (state = { count: 0 }, action) { switch(action.type) { case 'TEST': state.count++; return state; default: return state; } } export default { reduce };
{{reduce.count}}
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
vue路由攔截及頁面跳轉設定的方法介紹
############vue data不可以使用箭頭函數的問題解析#####################以上是Vue使用Redux的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
