题记:前段时间时隔8个月重新拾起了vue,vue的太(yi)好(jing)用(wang)了(wan)。

一、Vuex初体验

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

1、Store

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

// 创建stroe
const 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
})
// OR
store.commit({
  type: 'increment',
  amount: 10
})

其实这一点和dva有点相似

4、Action

这个和Mutation和相似,但是:

  1. Action 提交的是 mutation,而不是直接变更状态。
  2. Action 可以包含任意异步操作。

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

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

二、Vuex中的辅助函数

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

1、mapState

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

// bad
this.$store.state.a
this.$store.state.b
this.$store.state.c
// good
computed:{
    ...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
    })
}

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

未完待续...


Pjee
204 声望13 粉丝

Life is fantastic