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

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

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

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

文章图片

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

state:存储状态数据
getters: 状态(state)的计算属性，对标Vue里的的computed 计算属性。
mutations：对标与Vue里的mothods方法，注意他的同步的。
actions：需要注意他是异步的，很多数据获取的工作，比如调用api接口都在这里完成。
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 } });

【使用Vuex实现集中式存储管理应用的所有组件的状态】调用其方法：