vuex入門實例(3/3) - end

時間 2019-11-07

標籤 vuex 入門實例 end 简体版

原文原文鏈接

vuex入門實例(3/3)

最後一篇想寫下vuex 2.0之後的變化, 其實嚴格意義不算入門了你們隨便看看就好算這個系列的完結吧：）javascript

vuex爲了迎合vue2.0的變化進行了大量的調整和優化vue

先看下尤大2.0的設計傳送門java

總結下大概有幾點變化git

1. 更加語義化

原文 Terms naming change for better semantics 這個語義化說的是觸發action和mutation的API上
在使用action的時候咱們通常是從vue組件自己dispatch派發一個action 這個其實只是一個命令並無實際
改變什麼，而dispatch一個mutation 實際上是改變了vuex自己的數據因此通常從數據角度理解這種應該屬於事物提交。那麼變化以後的命名就是commit這樣更加語義化也更好的理解職責es6

新的寫法github

dispatch --> Action

methods:{
    Add : function(){
      this.$store.dispatch('ADD',2).then(function(resp){
          console.log(resp)
      })
    }
}

commit --> Mutation

actions:{
    "ADD" : function(store , param){
        return new Promise(function(resolve, reject) {
            store.commit('ADD',param)
            resolve("ok");
        })
    }
}

1.x 寫法就是觸發action和mutation都叫dispatchvuex

ADD: function(store, param ){
    store.dispatch('COMMIT',param)
}

2. 更靈活

1.x以前的版本action是不定義在vuex裏的, 而2.x actions能夠直接在store中定義了也就是能夠在store實例中直接dispatchpromise

var store =  new Vuex.Store({
    state: {
        messages: 0
    },
    mutations:{
        "ADD": function(state, msg) {
            state.messages += msg;
        }
    },
    // action不用再去外面定義 能夠直接寫在構建參數裏
    actions:{
        "ADD" : function(store , param){
            store.commit('ADD',param)
        },
    }
})
store.dispatch('ADD',2)

而getter也是如此在vue中直接取getters框架

computed:{
   msg : function(){
      return this.$store.getters.getMessage
   }
}

3. Promise Action

原文 Composable Action Flow 直譯 可組合的action流
其實這個組合事件流概念沒怎麼用過也很差翻譯我就簡單從變化性翻譯它
就是action如今返回了promise 在以前的版本並無返回promise 而2.x的源碼中已經返回了promise
因此也就能夠支持所謂的Composable Action異步

// action咱們定義一個返回promise的add action
actions:{
    "ADD" : function(store , param){
        return new Promise(function(resolve, reject) {
            store.commit('ADD',param)
            resolve("ok");
        })
    }
}

// 這裏能夠在dispatch以後直接處理異步
this.$store.dispatch('ADD',2).then(function(resp){
   console.log(resp) // ok
})

4. MapGetters/ MapActions

新版vuex提供了幾個封裝方法 mapState, mapMutations, mapGetters,mapActions

這些都是什麼鬼呢？

其實若是你用過vuex1.x如下的版本其實它就是咱們vue組件中的vuex屬性的換了一種更高逼格寫法

能夠定義一組要獲取的actions getters 而後map進來

// 舊版寫法
 var App = Vue.extend({
    template:"....",
    vuex:{
        getters:{
            msg : function(state){
                return state.messages
            }
        },
        actions:{
            add :actions.ADD
        }
    }
 })

 // 新版寫法 es5 寫法
 var App = Vue.extend({
    template:"....",
    computed:Vuex.mapGetters({
        msg : 'getMessage'
    }),
    methods:Vuex.mapGetters({
        add : 'ADD'
    })
})

這種本質跟1.x的vuex寫法是同樣的內部都是使用vue的Object.defineProperty取作響應式

// es6寫法 支持rest參數這種寫法 也能夠直接徹底使用map套裝注入
import { mapGetters, mapActions } from 'vuex'
export default {
  computed: {
    someComuted () { … },
    ...mapGetters(['getMessage', 'getName'])
  },
  methods: {
    someMethod () { … },
    ...mapActions(['ADD','EDIT'])
  }
}

5. Silent

在commit一個mutation的時候是否觸發訂閱的插件。

默認silent爲false 若是silent設置爲true 則表示不觸發註冊的subscribe

通常訂閱的插件都不會觸發了包括dev-tools

// 實例代碼
 store.commit('ADD',param,{ silent: true})

// 源碼 
 if (!options || !options.silent) {
   this._subscribers.forEach(sub => sub(mutation, this.state))
 }

6. 其餘變更

最新的vuex-2.0.0.rc5 爲說明API一些新變化

// 這個就是換個名字
   store.middlewares -> store.plugins
    
   // 這貨貌似幹掉又被還原了 尤大真是喜怒無常 哈    
   store.watch
   
   // 使用subscribe 監聽vuex的變化
   store.subscribe((mutation, state) => { ... })

   // 註冊模塊
   registerModule

   // 註銷模塊
   unregisterModule