vuex 2.x新版使用指南

9人阅读 评论(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 写法就是触发actionmutation都叫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. 其他变动

最新的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地址



作者:夜聆风
链接:https://www.jianshu.com/p/61761907469f
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
查看评论

基于Vue实现后台系统权限控制

基于Vue.js 2.x系列 + Element UI 的后台系统权限控制 前言:关于vue权限路由的那些事儿…… 项目背景:现有一个后台管理系统,共存在两种类型的人员 ①超级管理员(称...
  • qq_32340877
  • qq_32340877
  • 2018-03-01 19:09:19
  • 1564

使用vue开发项目遇到的一些问题

这个项目是我今年开始开发关于脚手架是使用的vue-cli(https://github.com/vuejs/vue-cli) 这边主要是记录几个我开发vue项目的经验 1、由于后台接口需要post...
  • xin_jie
  • xin_jie
  • 2017-04-05 09:34:34
  • 691

vuex进阶(模块化)

下面这篇是承接上一篇的内容的,如果没看过上一篇的内容,建议先翻一下上一篇的内容vuex入门。咋们这篇的功能和上一篇的一样,App.vue的内容没改,改的只是将store.js整个文件拆分成各个模块,下...
  • Tank_in_the_street
  • Tank_in_the_street
  • 2017-09-15 16:28:33
  • 815

PN532 使用手册User Manual UM0701-02

  • 2012年11月16日 17:42
  • 1.45MB
  • 下载

基于vue2 + vue-router + vuex 构建的一个新闻类大型单页面应用 —— 今日头条

前言 该项目UI模仿今日头条,该项目包括移动端和native端,移动端共4个页面,native端共20个页面,涉及文章的分类、展示、阅读、推荐、搜索和用户的登录、评论、收藏以及后台文章编辑等等,是一个...
  • weixin_41140869
  • weixin_41140869
  • 2017-11-22 14:37:07
  • 400

Vuex 快速入门

Vuex 快速入门基本用途: 将某些data变成组件间公用的状态,组件随时都可以进行访问和响应,解决了props传值的链式响应的代码冗余 给状态配以公用方法,使得 基本用法:/store/store....
  • TeckerYu
  • TeckerYu
  • 2017-02-07 20:05:40
  • 7963

Vuex 2.0 源码分析

当我们用 Vue.js 开发一个中到大型的单页应用时,经常会遇到如下问题: https://github.com/DDFE/DDFE-blog/issues/8 如何让多个 Vue 组...
  • sinat_17775997
  • sinat_17775997
  • 2017-03-15 17:18:28
  • 3134

基于vue-cli的vue项目之vuex的使用2-------commit参数

1.安装 npm install vuex 2.vuex/store.js//仓库状态管理,第19行。将store抛出 import Vue from 'vue'; import Vuex from...
  • HUSHILIN001
  • HUSHILIN001
  • 2017-09-20 16:47:08
  • 1745

vue2.x Cnode社区是基于vue、vue-router、vuex、axios、es6开发

关于项目 vue2.x Cnode社区是基于vue、vue-router、vuex、axios、es6开发,使用webpack构建工具编译打包项目http://www.vue-js.com/to...
  • sinat_17775997
  • sinat_17775997
  • 2017-03-10 09:25:45
  • 1228

【HTCVR】VRTK基本功能脚本说明

现在的VRTK3.2.1最新的版本,有[VRTK_SDKManager]、[VRTK_Scripts]、[ExampleSceneScripts]。 (一)[VRTK_S...
  • qq_35040828
  • qq_35040828
  • 2017-08-18 11:00:31
  • 413
    个人资料
    持之以恒
    等级:
    访问量: 41万+
    积分: 6225
    排名: 4967
    技术交流
    QQ联系方式:326202439
    最新评论