VueX---->Vue中标准的状态管理库

1.了解业务常见，多问问自己为什么要使用VueX.
2.Vuex的组成部分
3.如何快速构建自己的Store
4.项目上如何使用

初学者眼中的VueX

1.当你是一个Vue的初学者时，无论你看多少资料，听多少人说Vue，总会时不时让你听到一个名词“VueX”

然而你看完官网介绍，网上数不清的案例后

内心的真实写照：
很多时候讲地再多不如实际操作一下。放我们来构建一个最简单的业务场景

A组件有一个MODAl弹窗，B页面是一个独立的编辑页面，现在A,B页面都在C页面里，需要在B页面使用编辑按钮时将A组件内的一个弹窗显示出来
看我需求你肯定第一反应我组件传值不行吗？当然可以，AB拥有共同的C，C完全可以作为中间件来充当此次工作的桥梁。但是这样其实不够优雅，万一需求增加了呢？鬼知道我们的产品经理会不会突发奇想呢，“XXX,弹窗出来的时候我需要你吧B的一部分内容也在A的弹窗里显示下可以吧，我相信你”

既然可能有变化那么我们何不让整件事情变得优雅一点，这里就不再对Store的组成做过多描述
首先我们定义一个自己的store

构建一个最基本的Store.js

/**
 *  使用方法:本vuex将 action 和 getter 分离至 actions.js 和 getter.js中
 *  this.$store.commit('changeLoginStatus',true)
 *  this.$store.dispatch('addSex',data)
 * */
import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import getters from './getters'
import mutations from './mutations'
Vue.use(Vuex);
// 应用初始状态
const state = {
  collectionPlayer:null,
  isSnapshotConfirm:false,//切换图是否弹出确认框
  }
 // 创建 store 实例
export default new Vuex.Store({
  actions,
  state,
  getters,
  mutations
})

构建一个可以变更当前stste的Mutations.js

export default {
  showAddSnapshotModal(state,data){
    state.isSnapshotConfirm= data;
  }
  //这里用来构建所变更state中定义的状态量的方法
  }

组件中应用A组件

   computed: {
        getNodeEditModalState: {
          get: function () {
            if(this.$store.state.isSnapshotConfirm){
            }
            return this.$store.state.isSnapshotConfirm
          },
          set: function () {
            this.$store.commit("showAddSnapshotModal");
          }
        }
      },
       <Modal class="nodeEdit" v-model="getNodeEditModalState"></Modal>

使用该状态的组件变更方法 B组件

          setShowSnapshotState(){
            this.$store.commit("isShowSnapshotModel",true);
          },

经过这样处理后，你再也不需要考虑组件之间的逻辑关系，你只需要知道你要在什么地方修改，还有一个很大的优势就是你可以额外带参数获取，在你的A组件中里接受就可以了。

会了这个最简单的使用之后我们来看看进阶版的，让你的数据交互更优雅，更简洁的方式
getters，mutations
同样我们构建一个业务场景，有两个体量很大的组件，现在他们有一部分业务是由关联的，但他们的从属关系又是多级平级嵌套的。那么我们怎么样让这两者内部的方法或者变量都可以接受到两个组件外层应用的数据呢？
是时候开始我们的Vuex的另外一个重要属性getter计算属性了 ，在组件内我们都是知道也有一个属性computed，你可以理解为getter其实就是store的计算属性，且更强大因为它是可以接收参数的

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

// 引入工具
import {createTree} from "_util/createTree";
export default {
  namespaced: true,
  //这里定义了该store需要使用的所有变量
  state: {
    regionalSourceData: [],
    regionalTreeList: [],
    provincialSourceData:[],
    provincialTreeList:[],
    userRegional:[]

  },
  //这里再比价变更结果后对state中的变量经行变更
  getters: {
    regionalSourceData: state => state.regionalSourceData,
    regionalTreeList: state => state.regionalTreeList,
    provincialSourceData: state => state.provincialSourceData,
    provincialTreeList: state => state.provincialTreeList,
    userRegional: state => state.userRegional,
  },
  //这里时组件级别需要调用的变更state中变量的方法
  mutations: {
    // payload为接口返回的菜单结构，封装新的结果
    setTreeList(state, payload) {
      if (payload && payload.length > 0) {
        state.regionalSourceData = payload
        state.regionalTreeList = createTree(payload,'regionId','parentId')
      }
    },
    setProvincialTreeList(state, payload) {
      if (payload && payload.length > 0) {
        state.provincialSourceData = payload
        state.provincialTreeList = createTree(payload,'regionId','parentId')
      }
    },
    updateUserRegional(state, payload) {
      state.userRegional = payload
    },
  }
}

组件应用

<template>
  <div>
      <el-tree
        class="filter-tree"
        :data="treeList"
        >
      </el-tree>
    </div>
  </div>
</template>
// 引入vuex
import { mapGetters, mapMutations } from "vuex";
  computed: {
    ...mapGetters({
      treeList: "organizeTree/treeList"
    })
  },
  methods: {
    ...mapMutations({
      setTreeList: "organizeTree/setTreeList"
    }),
        /**
     * 获取组织结构列表
     */
    getOrganizeStru() {
      let that = this;
      OrganizeStruAPI()
        .then(res => {
          if (res.code === 200) {
            // 树结构转换
            that.setTreeList(res.data);
            if (that.treeList.length > 0) {
              that.$nextTick(() => {
                that.$refs.tree.setCurrentKey(that.treeList[0].deptId);  //默认选中树的一级
                that.defaultShowNodes=that.treeList[0].children;     //默认展开第一级下的子节点
                that.$emit("getUserTable", that.treeList[0].deptId);
              });
            }
          } else {
            that.$message.error(res.message);
          }
        })
        .catch(error => {
          that.$message.error(error.msg);
        });
    }
    }

进过这样处理后的数据，再项目的任何位置使用都是可以做到及时变更的，不再依赖繁重的组件传值，调用触发方法。