vuex共享数据仓库的模块化使用

一：概念：  vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。

 

二：vuex五大组成部分

1、state: vuex的基本数据，用来存储变量;(数据存储)

2、getters:从基本数据（(state）派生的数据，相当于state的计算属性;

3、 mutations:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个mution都有一个字符串的事件类型(type）和一个回调函数（handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state作为第一个参数,提交载荷作为第二个参数。（更改 state 中状态的逻辑同步操作)
commit-提交

4、action:和 mutations 的功能大致相同
①action提交的是mution.而不是直接变更状态，
②action可以包含任意异步操作。（提交mutation异步操作)
dispatch-调度

5、 modules:模块化vuex,可以让每一个模块拥有自己的state、 mutation、 action、getters,使得结构非常清晰，方便管理。（模块化)
1.现在store文件夹中定义好vuex模块js文件，并导出内容
注意：导出时设置 namespaced: true 的方式使其成为带命名空间的模块。保证在变量名一样的时候，添加一个父级名拼接。
2.在index.js文件中的先引入vuex模块
3.在index.js文件中的modules：{ }使用
4.最后进入到vue文件中使用，在methods中定义方法调用

 

三：具体的使用方法

=================================在store/index.js文件中编写=========================================

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

 

//school模块部分

const school = {

  namespaced: true,

  state: {

    val: 1,

    num: 0,

  },

  getters: {

    bignum(state) {

      return state.num * 10

    }

  },

  mutations: {

    add() {

      console.log("add");

      this.state.schoolAbout.num += this.state.schoolAbout.val;

    },

    pop() {

      console.log("pop");

      this.state.schoolAbout.num -= this.state.schoolAbout.val;

    },

    odd() {

      console.log("odd");

      if (this.state.schoolAbout.num % 2) {

        this.state.schoolAbout.num += this.state.schoolAbout.val;

      }

    },

    eve() {

      console.log("eve");

      if (!(this.state.schoolAbout.num % 2)) {

        this.state.schoolAbout.num += this.state.schoolAbout.val;

      }

    },

  },

  actions: {

  },

}

//人员模块的部分

const preson = {

  namespaced: true,

  state: {

    lists: [

      { id: 1, name: "张三" },

      { id: 2, name: "王五" },

      { id: 3, name: "李四" },

    ],

  },

  getters: {

  },

  mutations: {

    addpreson() {

      console.log(this);

      console.log("addpreson");

      var newpreson = { id: 4, name: "李白" }

      this.state.presonAbout.lists.push(newpreson)

    }

  },

  actions: {

  },

}

export default new Vuex.Store({

  modules: {

    schoolAbout: school,

    presonAbout: preson

  }

})

// 小结：vuex模块化使用注意事项：（在store/index.js中）

// 1.开启命名空间 namespaced: true -- 方便在组建中使用

// 2.为每个模块命名，注意$store中state结构发生变化，原来所有的数据放在一起，现在不同模块的的数据分开放

// 3.由于数据结构的变化，所以在getters,mutations,actions使用数据时要加上模块名称

 

 

==============================以下实在具体的组件中使用vuex中的数据==========================

======school组件========

<template>

  <div class="school">

    <h2>运结果为:{{ num }}---在乘以10后:{{ bignum }}</h2>

    <select name="number" id="selt" v-model.number="val">

      <option value="1">1</option>

      <option value="2">2</option>

      <option value="3">3</option>

    </select>

    <button @click="add">+</button>

    <button @click="pop">-</button>

    <button @click="odd">奇数时加</button>

    <button @click="eve">偶数时加</button>

    <h4 style="color: #f33">人员列表总人数：{{ lists.length }}</h4>

  </div>

</template>

<script>

import { mapState, mapGetters, mapMutations } from "vuex"; //映射方法

export default {

  data() {

    return {};

  },

  computed: {

　//=========  vuex中四个映射方法的使用，进行简便操作  ========

    // 1.mapState方法:用于帮助我们映射state中的数据为计算属性

    // 来使用mapstate的好处就是，无需在{{}}中写的过于复杂 $store.state.num

    // 注意点：对象中使用...将对象进行展开

    ...mapState("schoolAbout", ["val", "num"]),

    ...mapState("presonAbout", ["lists"]),

    // 2.mapGetters方法:用于帮助我们映射getters中的数据为计算属性

    ...mapGetters("schoolAbout", ["bignum"]), //mapGetters的数组写法

  },

  methods: {

    //#region

    // 程序员人为的写法，自已调用$store.commit()方法

    // add() {

    //   this.$store.commit("add");

    // },

    // pop() {

    //   this.$store.commit("pop");

    // },

    // odd() {

    //   this.$store.commit("odd");

    // },

    // eve() {

    //   this.$store.commit("eve");

    // },

    //#endregion

    // 3.mapActions方法:用于帮助我们生成与actions对话的方法，即:包含$store.dispatch(xxx)的函数

    ...mapMutations("schoolAbout", ["add", "pop", "odd", "eve"]),

    // 4.mapMutations方法:用于帮助我们生成与mutations对话的方法，即:包含|$store.commit(xxx)的函数

    // =====小结四种map方法：1，2写在计算属性中，3，4写在方法中，都需要使用...进行展开

    //           他们都有两种写法，对象形式和数组形式，如果是采用模块化写法，要加上具体对应名称。

  },

};

</script>

<style scoped>

button {

  margin: 0px 5px;

}

</style>

 

==========preson组件=========

<template>

  <div class="box">

    <h3 style="color: #f33">数字求和结果：{{ num }}</h3>

    <button @click="addpreson">添加工作人员</button>

    <h4 v-for="(item, id) in lists" :key="id">{{ item.name }}</h4>

  </div>

</template>

<script>

import { mapState, mapMutations } from "vuex"; //映射方法

export default {

  data() {

    return {};

  },

  computed: {

    ...mapState("schoolAbout", ["val", "num"]),

    ...mapState("presonAbout", ["lists"]),

  },

  methods: {

    ...mapMutations("presonAbout", ["addpreson"]),

  },

};

</script>

<style scoped>

h4 {

  color: rgb(241, 191, 124);

}

</style>