项目开发使用到的 vuex 思路理解

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

  • state
  • mutations
  • actions
  • getters
  • Module

state

保存状态的位置,在 state 里面可以像是在 data 一样存放数据

// vuex state
state: {
    msg: ``
}
// 组件 data
data () {
    return  {
        msg: ``
    }
}

调用状态数据的话可以这么调用

computed: {
    getMsg () {
        return this.$store.state.msg
    }
}
// 如果想要修改是不可以直接在组件内部写方法修改的
// 错误的
updateMsg () {
    this.$store.state.msg = newMsg
}

actions

action 我自己理解的是像是组件内部的 methods, 可以在内部定义组件使用的方法,这里面定义的所有方法都是异步的

// 更新数据
}
// 如果想要修改是不可以直接在组件内部写方法修改的
updateMsg () {
    this.$store.dispatch(`updateMsg`, newMsg)
}
updateMsg ({state}, newMsg) {
// 需要使用状态的数据,就可以直接调用 state
// 就像是再组件内部去 this.msg 一样去调用
    state.msg = newMsg
}

mutations

mutations与 action 很类似,只不过区别在于这里面定义的方法都是同步的

使用:

更新数据,mutations是来改变状态操作的,如果是更改状态的话,应该是 actions 告诉mutations我要异步取数据了,取到之后你马上同步给我更新一下状态

action: {
    updateMsg ({commit}, newMsg) {
        commit(`updateMsg`, newMsg)
    }
    // 方便之处,如果有其他地方也要更新同一个数据,就可以再定义一个方法调用
    _updateMsg ({commit}, newMsg) {
        commit(`updateMsg`, newMsg)
    }
},
mutations: {
    updateMsg (state, newMsg) {
        state.msg = newMsg
    }
}

getters

对 state 内部的数据做一些处理,比如常见的过滤,去重等

state: {
    arr: [
        {a: 1, done: false},
        {a: 2, done: true},
        {a: 3, done: false}
    ]
},
getters: {
    getDone (state) {
        return state.arr.filter(item=> item.done === true)
    }
}

Module

文档解释

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割


在 将 state 再次模块化,刚开始使用 vuex 的时候,我就在想 state 和 action 这样写下去岂不是越来越大越来越难以阅读,当时还不是很清楚 vuex 的使用,当我写方法时候要不停的上滚下滚找方法找数据的时候我去看了一遍 vuex 文档,于是发现了这个东西,非常好的解决了 state 状态庞大的问题

每一个功能是一个组件,每个组件对应着一个 module, 每个 module 内部有着自己的状态,方法,真正的组件化,如果有理解不正确的地方还请指正~