vuex 中module模块的使用

vuex是vue全家桶系列的重要组成部分,数据的状态管理,很多时候 我们只会把数据统一放在脚手架生成的 store文件夹的index.js中

但是在实际的项目中往往 数据可能有点庞大 而且项目开发往往是模块化开发 如果把各个模块之间的数据放在一个文件下 显示是不合理的

1.在说之前 先学习一下几个辅助函数的使用 ,

你可以直接使用   {{$store.state.count}}    也可以是  this.$store.state.count   //假设 在state中有一个 count的变量

这样当然也可以 但随着项目的增加增大 显然不合理  这个时候如果我们把 vuex中的数据 映射到 组件的计算方法中显然不失为一种好方法

computed:{count:function(){return this.$store.state.count }}

这样看起来 是不是很不错啊   可惜的是 这种方法只在项目小的时候可以 项目大呢 不能写100多个这样的 计算属性吧 

所以就引来 辅助函数 同时配合 es6的 扩展运算符 实现数据状态 到组件的映射  

使用辅助函数 前提是先引进来

import {mapState,mapMutations,mapGetters} from "vuex"

在计算属性中  

computed:{

      ...mapState(['count])    //  不想起名字 就是用vuex中人家的原名 就叫做 count 当作计算属性使用

      ...mapState({

                add:'count'        // 将vuex中的 count  映射成当前组件的的 add的计算属性 其实就是起一个别名 

        })

     ...mapState({

             count:state=>state.count        // 箭头函数的方法 映射

       })

}

以上三种方法达到的效果是一样的   看你自己选择把  其他的集中辅助函数 用法 也差不多 就不再一一赘述了

2.vuex中的 模块使用

都知道 在 vuex中 又module这个东西  

我在 创建的脚手架中  把 store文件 index.js文件  删除了只剩下这点东西

import Vue from 'vue'
import Vuex from 'vuex'
import test from './count.js'
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    test
  }
})
在当前文件夹下 创建一个count.js文件  创建一个 count模块 把里面的数据存入进去

export default {
  state: {
      count:10
  },
  getters:{
      doubleCount(state){
          return state.count*2;
      }
  },
  mutations: {
      add(state){
          state.count++;
      },
      decrease(state){
          state.count--;
      }
  },
  actions: {
      // 上下文参数
      delayAdd(context){
          setTimeout(()=>{
             context.commit('add');
          },1000)
      }
  }
}

你要是在创建更多的模块依照这种方法类型 

不过在使用的时候就要变一变了 我们得指定是哪一个模块下的数据 

computed(){

         ...mapState({

                   count:state=>state.test.count        //  指的是 test模块下的  count数据  要用这种方法  因为其他的俩种方法默认取得是index.js文件下的 数据 我们要是不在里面放数据 全部放到模块中 他是取不到 就会报错

          })

}