一、Vuex初体验

以前用惯了react的dva然后突然切换到vue的vuex真的有点不习惯。

1、Store

这个是vuex中的大哥大，什么都归它管（state、mutations、getter、action、module），你可以把它理解为一个仓库（官方文档也是这么说的）

// 创建stroeconst store = new Vuex.Store({  state: {    count: 0  },  mutations: {    increment (state) {      state.count++    }  }})

2、State

每个Stroe中都会有这么一个状态树、对于vue来说他是全局的，对于store来说他是唯一的，我们可以把它理解为仓库中的货物，当客户（vue）中想要取出仓库（store）中的货物（state），很简单this.$stroe.state.test

3、Mutation

mutation 必须是同步函数

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。这个我们可以把它比喻为一个订单（Mutation），当客户（vue）需要改变仓库（store）中的货物（state）时，我们就可以通过这个方法去改变，但是这个方法在本地是不能被直接调用的，你需要以相应的 type 调用 store.commit 方法：

// 无参数提交store.commit('increment')// 有参数store.commit('increment', {  amount: 10})// ORstore.commit({  type: 'increment',  amount: 10})

其实这一点和dva有点相似

4、Action

这个和Mutation和相似，但是：

Action 提交的是 mutation，而不是直接变更状态。

Action 可以包含任意异步操作。

而且actions是与Mutation的触发方法也不同，它是用的store.dispatch(确认过眼神)，而且它可以调用actions，讲道理它是比mutation高一个等级的。

至于剩下的Getter、Module目前好像还没有怎么用到，就下次用了体验了过后再说吧。

二、Vuex中的辅助函数

在vuex中所有的辅助函数都只有一个目的，方便你我他

1、mapState

当我们需要在一个页面中获取store中的多个状态时，怎么办

// badthis.$store.state.athis.$store.state.bthis.$store.state.c// goodcomputed:{    ...mapState({        a:state=>state.a,        b:state=>state.b,        c:state=>state.c    })}

但是这个地方有一个坑，如果a是一个对象

a:{    d:1,    e:{        f:2    }}computed:{    ...mapState({        f:state=>state.a.e.f    })}

这样是不行的，具体为什么我也不是很清楚，求大佬讲解

未完待续...

转载地址：http://wpnlx.baihongyu.com/

你可能感兴趣的文章