欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

讓Vue也可以使用Redux的方法

 更新時間:2018年05月23日 13:46:50   作者:YaHuiLiang(Ryou)  
這篇文章主要介紹了讓Vue也可以使用Redux的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

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

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

Gayhub Url

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中el-message的封裝使用

    vue中el-message的封裝使用

    本文主要介紹了vue中el-message的封裝使用,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-02-02
  • vue強制刷新組件的三種方法

    vue強制刷新組件的三種方法

    在Vue中,強制刷新組件通常涉及到以下幾種方法,本文給大家列出了常見的三種vue強制刷新組件的方法,感興趣的朋友跟隨小編一起看看吧
    2024-04-04
  • Vue實現(xiàn)路由跳轉(zhuǎn)的3種方式超詳細(xì)分解

    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-12
  • 在vue2中實現(xiàn)截圖功能的基本步驟

    在vue2中實現(xiàn)截圖功能的基本步驟

    在Vue 2中實現(xiàn)截圖功能,可以使用HTML5的Canvas元素和一些JavaScript代碼來捕獲屏幕或特定元素的截圖,以下是一個簡單的步驟和示例代碼來實現(xiàn)這個功能,需要的朋友可以參考下
    2023-10-10
  • Vue組件間通信方法總結(jié)(父子組件、兄弟組件及祖先后代組件間)

    Vue組件間通信方法總結(jié)(父子組件、兄弟組件及祖先后代組件間)

    這篇文章主要給大家介紹了關(guān)于Vue組件間通信的相關(guān)資料,其中包括父子組件、兄弟組件及祖先后代組件間的通信,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • vue獲取DOM元素并設(shè)置屬性的兩種實現(xiàn)方法

    vue獲取DOM元素并設(shè)置屬性的兩種實現(xiàn)方法

    下面小編就為大家?guī)硪黄獀ue獲取DOM元素并設(shè)置屬性的兩種實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • vue 內(nèi)置過濾器的使用總結(jié)(附加自定義過濾器)

    vue 內(nèi)置過濾器的使用總結(jié)(附加自定義過濾器)

    這篇文章主要介紹了vue 內(nèi)置過濾器的使用總結(jié)(附加自定義過濾器),詳細(xì)的介紹了各種過濾器的使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-12
  • vue.js?diff算法原理詳細(xì)解析

    vue.js?diff算法原理詳細(xì)解析

    這篇文章主要介紹了vue.js?diff算法原理詳細(xì)解析,diff算法可以看作是一種對比算法,對比的對象是新舊虛擬Dom。顧名思義,diff算法可以找到新舊虛擬Dom之間的差異,但diff算法中其實并不是只有對比虛擬Dom,還有根據(jù)對比后的結(jié)果更新真實Dom
    2022-06-06
  • uni-app中vue3表單校驗失敗的問題及解決方法

    uni-app中vue3表單校驗失敗的問題及解決方法

    最近遇到這樣的問題在app中使用uni-forms表單,并添加校驗規(guī)則,問題是即使輸入內(nèi)容,表單校驗依然失敗,本文給大家分享uni-app中vue3表單校驗失敗的問題及解決方法,感興趣的朋友一起看看吧
    2023-12-12
  • Vue Router路由無法跳轉(zhuǎn)問題匯總

    Vue Router路由無法跳轉(zhuǎn)問題匯總

    這篇文章主要介紹了Vue Router路由無法跳轉(zhuǎn)問題匯總,在這里我整理了部分Vue Router路由無法跳轉(zhuǎn)問題,結(jié)合實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2023-09-09

最新評論