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

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

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

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

以下是一个表示“单向数据流”理念的简单示意:
使用Vuex实现集中式存储管理应用的所有组件的状态_第1张图片

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

  1. state:存储状态数据
  2. getters: 状态(state)的计算属性,对标Vue里的的computed 计算属性。
  3. mutations:对标与Vue里的mothods方法,注意他的同步的。
  4. actions:需要注意他是异步的,很多数据获取的工作,比如调用api接口都在这里完成。
  5. modules:store的子模块,在开发大型项目的时候你一定会用的上。
    使用Vuex实现集中式存储管理应用的所有组件的状态_第2张图片
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");

你可能感兴趣的:(vue)