使用Vuex实现集中式存储管理应用的所有组件的状态

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

这个状态自管理应用包含以下几个部分：

• 状态，驱动应用的数据源；
• 视图，以声明方式将状态映射到视图；
• 操作，响应在视图上的用户输入导致的状态变化。

以下是一个表示“单向数据流”理念的简单示意：

Vuex是应用程序的状态管理。有五个默认的基本的对象：

1. state:存储状态数据
2. getters: 状态(state)的计算属性，对标Vue里的的computed 计算属性。
3. mutations：对标与Vue里的mothods方法，注意他的同步的。
4. actions：需要注意他是异步的，很多数据获取的工作，比如调用api接口都在这里完成。
5. modules：store的子模块，在开发大型项目的时候你一定会用的上。
   

import Vue from "vue";
import Vuex from "vuex";
import * as snackbar from "@/store/snackbar";
import { api_request } from "@/util/network";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    defaultLaunchpadId: null,
    loginTitle: null,
  },
  mutations: {
    show_defaultLaunchpadId(state, id) {
      state.defaultLaunchpadId = id;
    },
    show_loginTitle(state, title) {
      state.loginTitle = title;
    }
  },
  actions: {
    async fetchDefaultLaunchpad({ commit }) {
      await Vue.http
        .get("api/launchpad")
        .delegateTo(api_request)
        .then(res => {
          if (res && res.autorunApplication) {
            commit("show_defaultLaunchpadId", res.autorunApplication);
          }
        });
    },
    async fetchLoginTitle({ commit }) {
      await Vue.http
        .get("api/login")
        .delegateTo(api_request)
        .then(res => {
          if (res && res.logoDesc) {
            commit("show_loginTitle", res.logoDesc);
          }
        });
    }
  },
  modules: { snackbar }
});

调用其方法：

 store.dispatch("fetchLoginTitle");

 store.dispatch("fetchDefaultLaunchpad");