vuex入门实例

Vuex 2.0 新特性详解

最新推荐文章于 2025-06-16 01:00:00 发布

转载最新推荐文章于 2025-06-16 01:00:00 发布 · 2.4k 阅读

最后一篇想写下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