vuex入门实例(3/3) - end

vuex入门实例(3/3)

最后一篇 想写下vuex 2.0以后的变化, 其实严格意义不算入门了 大家随便看看就好 算这个系列的完结吧 ：）

vuex为了迎合vue2.0的变化 进行了大量的调整和优化

先看下尤大2.0的设计 传送门

总结下大概有几点变化

1. 更加语义化

原文 Terms naming change for better semantics 这个语义化说的是触发action和mutation的API上
在使用action的时候 我们一般是从vue组件本身dispatch派发一个action 这个其实只是一个命令 并没有实际
改变什么， 而dispatch一个mutation 其实是改变了vuex本身的数据 所以一般从数据角度理解 这种应该属于事物提交。那么变化之后的命名就是commit这样更加语义化 也更好的理解职责

新的写法

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都叫dispatch

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

2. 更灵活

1.x之前的版本action是不定义在vuex里的, 而2.x actions可以直接在store中定义了 也就是可以在store实例中直接dispatch

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

总结

总体来说vuex2.0的变化还是跟vue本身一样 也算折腾了一下 新版的写法和逼格更高些。作为vue全家桶中重要的状态流管理框架 vuex值得你拥有

vuex入门实例结束 感谢阅读：）

demo地址