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')
    }
}

然后看一下调用方：