vue之vuex详解

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。（官方解释）

vuex有什么用？

vuex能够更好的实现组件之间的数据共享，说到这里可能有一个疑问，我用data中的数据也可以实现组件中的数据共享，为啥要用vuex这么麻烦呢？试想一下，如果我们有几个组件，完全可以通过props $emit、eventbus、依赖注入、ref等方式实现数据共享，但是eventbus和依赖注入是有缺点的，它们的数据不是响应式的，这时候可能我们最常用的是通过第一种 props $emit方式（一收一发）；如果组件特别多，那么这样写起来复杂度就很高，很容易出bug。这时候为了解决这个问题，比较好的方式就是采用vuex进行数据的同一管理（一般适用于大型项目，小型项目组件少的，可以不用）。接下来对vuex的使用做一些介绍。

一、vuex的总体介绍

vuex分为同步和异步操作，如下图（来自vue官网）

同步模式：
直接在Mutations钩子函数中对State进行修改，最后渲染数据到页面

异步模式：
首先在Actions中通过commit触发Mutations中的方法，然后对State进行处理，最后将数据渲染到页面中

补充一下：
同步模式下：触发mutations中的方法使用 ： this.$store.commit(‘方法名’,[参数根据需要填写])
异步模式下：触发actions中的方法使用：store.dispatch(‘方法名’,[参数根据需要填写])

二、Vuex的核心概念
State Getter Mutation Action Module
1 state可以理解为vue实例中的data，就是用来存放数据的
2 getter 可以理解为vue实例中的计算属性computed，用法相同
3 mutation可以用来改变state的值，通过它可以更加便捷的进行代码调试，因为通过前面的图可以看到，它是和devtool工具连接在一起的
4 action 这里主要处理异步的操作，比如从后台接口ajax请求数据等等
5 module 模块 将store进行拆分成一个个独立模块（每个模块拥有自己的 state、mutation、action、getter、嵌套函数）

三、vuex简单实例

在使用vuex前需要先下载vuex（vuex下载地址）
接下来我们实现一个简单的效果
功能需求： 通过列表展示异步请求的数据，通过按钮实现点击显示和隐藏列表，累加效果展示。（累加效果部分用同步模式，列表通过异步模式）

// 基础页面布局搭建
<div id="app">
    <btns></btns>
    同步： {{$store.state.count}}
    <br>
    异步：
    <table v-if='$store.state.isshow'>
        <tr v-for='item in $store.state.datalist' :id='item.id'>
            <td>{{item.id}}</td>
            <td>{{item.cityName}}</td>
        </tr>
    </table>
</div>
// 新建一个组件
Vue.component('btns',{
    template:`
    <div>
        // 异步点击事件，使用了dispatch去触发getdata方法
        <button @click="$store.dispatch('getdata')">点击1异步</button>
        // 同步点击事件，直接使用commit去触发add方法
        <button @click="$store.commit('add')">点击2同步</button>
    </div>
    `,
})
// vuex部分，其中异步模式过程中穿插了getter的使用可以看出和computed的用法相同
var store = new Vuex.Store({
    state:{
    	// 列表数据显示
        datalist:[],
        // table列表的显示状态
        isshow:false,
        // 初始数据0
        count:0
    },
    mutations:{
        add(state){
        // 一个简单的累加效果
            state.count++;
        },
        // 用来改变table列表显示状态，接收列表的数据
        changelist(state,obj){
            state.datalist = obj;
            state.isshow = store.getters.changeisshow;
        }
    },                             
    actions:{
    // 通过这个方法来处理异步请求操作
        getdata(obj){
            fetch('./car.json').then(res=>res.json()).then(result=>{
                // 向mutations发送commit，调用changelist方法
                obj.commit('changelist',result);
            })
        }
    },
    getters:{
    // 为了演示getter的用法，可以看出和vue实例中的computed用法类似
        changeisshow(state){
            return !state.isshow;
        }
    }
})

效果展示：通过devtool调试面板看出，同步和异步的数据最终都能正常展示，而且响应式数据也正常

后序会补充在项目中的具体使用