Vuex

详情使用移步官网文档：https://vuex.vuejs.org/zh/

./src/store.js

import Vue from 'vue'
import Vuex from 'vuex'

// 在vue单文件项目开发中使用vuex必须先注册这个插件
Vue.use(Vuex)

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

// 创建数据仓库store对象，参数是store的配置对象
// 核心概念：state、mutations、actions、getters、modules
// state：vuex中的数据源，我们需要保存的数据就保存在这里
// mutations：表示仓库数据的修改方法，任何组件（页面）中必须通过提交mutations的方式修改数据（这些修改是同步的）
// actions：对仓库中的数据做异步修改
// getters：表示仓库中数据的获取方法，相当于仓库数据的计算属性（vue中的computed类似）
// modules：由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、
export default new Vuex.Store({
  state: {
    count: 1,
    name: "张三",
    age: 18,
    remoteData: ""
  },
  mutations: {
    // mutations中的函数默认第一个参数是状态state，第二个参数是提交此方法时传递过来的参数
    countAdd(state) {
      state.count++;
    },
    setCount(state, value) {
      state.count = value;
    },
    setRemoteData(state, value) {
      state.remoteData = value;
    }
  },
  actions: {
    // actions中的函数默认第一个参数是store对象（原因：actions中的函数不能直接修改state中的数据，而是通过提交
    // mutations中的方法进行修改：store.commit("同步修改的方法",[参数])）
    test(store) {
      // 比如：发起网络请求
      // 请求完成，得到数据
      store.commit("setRemoteData", "这是服务器返回的数据");
    }
  },
  getters: {
    // getters中的函数参数是store中的state属性
    isAdult(state) {
      if (state.age >= 18) {
        return "成年人";
      } else {
        return "未成年人";
      }
    }
  },
  modules: {

  }
})

/*
    const moduleA = {
    state: { ... },
    mutations: { ... },
    actions: { ... },
    getters: { ... }
  }

  const moduleB = {
    state: { ... },
    mutations: { ... },
    actions: { ... }
  }

  const store = new Vuex.Store({
    modules: {
      a: moduleA,
      b: moduleB
    }
  })

  store.state.a // -> moduleA 的状态
  store.state.b // -> moduleB 的状态
*/

./src/views/Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <!-- vuex不推荐直接调用状态的数据 -->
    <p>{{this.$store.state.count}}</p>
    <p>{{this.$store.state.remoteData}}</p>

    <p>{{count}}</p>
    <p>{{name}}</p>
    <p>{{isAdult}}</p>

    <button @click="btnClick">按钮</button>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

// 引入辅助函数
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";

export default {
  name: "home",
  components: {
    HelloWorld
  },
  mounted() {
    // var a = {
    //   name: "张三"
    // }
    // var b = {
    //   age: 18
    // }
    // 对象合并（把从第二个开始的对象属性合并到第一个对象）
    // var c = Object.assign({},a,b);
    // var c = {...a,...b}
    // console.log(c);
    // Vue.use(Vuex)全局注册插件之后，那么在组件中就可以通过this.$store访问仓库
    // console.log(this.$store.state);
    // 在组件中可以通过this.$store对象直接获取仓库中的数据，也可以直接修改。但是vuex不推荐这样修改
    // vuex推荐组件只能以一种可预测的方式来修改数据，通过提交mutations中的方法进行修改。
    // this.$store.state.count = 10;
    // this.$store.commit("countAdd");
    // this.$store.commit("setCount",10);
    // 异步方法如何调用？
    // this.$store.dispatch("test");
  },

  methods: {
    ...mapMutations(["setCount", "setRemoteData"]),
    ...mapActions(["test"]),
    btnClick() {
      // this.$store.commit("countAdd");
      // this.$store.commit("setCount",10);
      this.setCount(20);
      this.setRemoteData("哈哈");
    }
  },

  // 由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性 中返回某个状态
  /*computed: {
    count(){
      return this.$store.state.count;
    },
    name(){
      return this.$store.state.name;
    }
  }*/
  // 当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性
  // computed: mapState(["count","name"])
  // 对象展开运算符
  computed: {
    ...mapState(["count", "name"]),
    ...mapGetters(["isAdult"])
    // 继续补充其他的计算属性的方法
  }
};
</script>