大前端之路-vuex 速览

vuex 是什么？能够解决什么问题？

我的理解 就是单页应用中 多个组件之间 共享数据的 状态机通用管理机制。有点相似于java中的观察者模式，在android中相似的有eventbus。中大型应用应该都会用到。

若是你跟我同样是有移动开发经验的前端新人，那么最好仍是学习一下这个东西，之后遇到相似问题就能够直接哪来用了。

固然了，不要滥用vuex，能用参数传递的，仍是尽可能参数传递

快速在单页应用中共享数据

好比说 咱们先在compa 中 对一个数据 进行加操做，而后再另一个comb中 就能够拿到 加加之后的值。 听起来有一点像java中的单例。 在vuex 中 咱们来实现一下

首先，咱们来看下简单的目录结构：

而后看下store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//要共享的数据
const state = {
    count: 1
}

//对共享数据的操做
const mutations = {
    add(state) {
        state.count++
    },
    reduce(state) {
        state.count--
    }

}

//把这个状态 暴露出去 也就是 数据 和对应数据的操做
export default new Vuex.Store({
    state, mutations
})
复制代码

看看咱们的Count.vue 怎么对 共享数据进行操做

<template>
    <div>
        <h2>{{msg}}</h2>
        <hr>
        <h3>{{$store.state.count}}</h3>

        <p>
            <button v-on:click="$store.commit('add')">+</button>
            <button v-on:click="$store.commit('reduce')">-</button>

        </p>
    </div>

</template>

<script>
import store from "@/vuex/store";

export default {
  data() {
    return {
        msg:'hello vuex'
    };
  },
  store
};
</script>


复制代码

注意这里点击事件的写法。

最后看看观察者，其实观察者没啥好说的，最好写了。

<template>
    <div>
        <h2>{{msg}}</h2>
        <hr>
        <h3>{{$store.state.count}}</h3>

    </div>

</template>

<script>
import store from "@/vuex/store";

export default {
  data() {
    return {
        msg:'hello vuex 观察者'
    };
  },
  store
};
</script>


复制代码

至此，咱们就能够完成 在count页面中操做数据 可是其余页面也能够接收到数据的变化通知 这个功能了。

vuex中 如何简洁的获取状态对象的值

state 其实就是状态对象，mutations 就是对状态对象操做的方法。

来看看上面的例子的缺陷：

换种写法：

再换一种：

再来一种最简单的方法：

vuex 状态管理器

先来看一下 若是咱们对状态对象的操做方法里面 要传递参数 应该怎么作

先定义一下这个函数：

而后看一下 咱们怎么调用他

<button v-on:click="$store.commit('addN',5)">一次性加5</button>

复制代码

最后看看咱们调用方法的简写 应该怎么写

vuex 中的计算属性 getters

这个地方其实就是一个过滤器的做用，举个例子，咱们有一组销售的数据。 可是我取的时候 我想取最近100天销售的数据 那我确定要对源数据处理之后生成新的数据（不修改源数据的状况下） 再返回。

举个例子

定义getters

使用它

最后看一下效果

最后提一下，对于java技术栈的同窗来讲，必定不要在 任何属性里的get方法中加入特殊的逻辑

action 异步修改状态

前面提到的mutation也能够修改状态，只不过他是同步的，而action是异步的。

//通常而言 咱们能够在actions对象中 处理一些要异步处理的操做
const actions = {
    //上下文对象 
    addAction(context) {
        context.commit('add', 10)
        setTimeout(() => {
            context.commit('reduce')
        }, 5000)
    },
    reduceAction({ commit }) {
        commit('reduce')
    }
}
复制代码

而后看一下调用方：

module 模块组 ---大项目专用

我的以为 这个module 只有大型项目会用，通常小团队用这个反而增长复杂度。这里就知道有这么个东西便可。 讲白了这个东西仍是偏向工程性质的多一点，而不是功能性的。 适用于大项目 进行模块化开发的。

定义module

使用module

想要简写方法也能够

若是你对module 感兴趣，能够参阅module官方文档