vuex中使用mapStations、mapMutations、mapState、mapGetters在modules中的迷惑

vuex中使用单个modules组件状态管理

1.安装vuex

cnpm install vuex --save-dev

2.在src目录下创建store目录并创建index.js,在mian.js中引入index.js

3.在store目录下创建User目录并创建user.js
内容如下

import Vue from 'vue'
import Vuex from 'vuex';
Vue.use(Vuex)



/*
state：存储状态（变量）
getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $store.getters.fun()
mutations：修改状态，并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
actions：异步操作。在组件中使用是$store.dispath('')
modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。


state:
    vuex中的数据源，我们需要保存的数据就保存在这里，可以在页面通过 this.$store.state来获取我们定义的数据；
getters:
    Getters相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，
    且只有当它的依赖值发生了改变才会被重新计算，这里我们可以通过定义vuex的Getter来获取，
    Getters 可以用于监听、state中的值的变化，返回计算后的结果


*/

//定义存储状态
const state = {
  count: 1
}

/*
mutations 里面放置的是我们操作state对象属性的方法
外部通过commit  使用mutations内的方法  改变state内部状态
*/

const mutations = {
  mutationsAddCount(state, n = 0) {
     state.count += n;
  },
  mutationsReduceCount(state, n = 0) {
     state.count -= n;
  }
}

/*
actions是异步操作 在methods中使用dispatch进行派发
*/
const actions = {
  actionsAddCount(context, n = 0) {
    return context.commit('mutationsAddCount', n)
  },
  actionsReduceCount({ commit }, n) {
    return commit('mutationsReduceCount', n)
  }
}

const getters = {
  getterCount(state) {
    return state.count;
  }
}


//导出store
export default {
  namespaced:true,
  state,    // 共同维护的一个状态，state里面可以是很多个全局状态
  getters,  // 获取数据并渲染
  actions,  // 数据的异步操作
  mutations  // 处理数据的唯一途径，state的改变或赋值只能在这里

}

4.在index.js中引入user.js

import Vue from 'vue'
import Vuex from 'vuex';
Vue.use(Vuex)

import user from './User/user'

export default new Vuex.Store({
  // 通过modules属性引入user 模块。
  modules:{
    user
  }
})

5.重点，如何在vue中使用user
创建user.vue
引入vuex的mapState, mapMutations, mapActions，mapGetters

import { mapState, mapMutations, mapActions，mapGetters } from "vuex";

<template>
  <div class="home">
    <p>{{ count }}</p>
    <el-row>
      <el-button @click="handleAddClick(10)">增加</el-button>
      <el-button @click="handleReduceClick(10)">减少</el-button>
    </el-row>
    <el-row>
      <el-button @click="actionsHandleAddClick(10)">actions增加</el-button>
      <el-button @click="actionsHandleReduceClick(10)">actions减少</el-button>
    </el-row>
  </div>
</template>

如何使用mapState调用user状态管理？

computed: {
    ...mapState({
      count: state => state.user.count
    })
  }

如何使用mapMutations调用user状态管理？

 ...mapMutations("user", {
      handleAddClick: "mutationsAddCount",
      handleReduceClick: "mutationsReduceCount"
    })

如何使用mapActions调用user状态管理

...mapActions("user", {
      actionsHandleAddClick: "actionsAddCount",
      actionsHandleReduceClick: "actionsReduceCount"
    })

红色框区域是modules中往外暴露的user状态管理

上面也可以替换成

methods: {
        ...mapActions('user', {
              actionsHandleAddClick(dispatch, param) {
		        dispatch("actionsAddCount", param);
		      },
        })

如果你无法使用[…mapStation,…mapMutations,…mapStations,…mapGetters],
解决方案：

在package.js里面增加"babel-preset-stage-3": “^6.24.1”,

cnpm install babel-preset-stage-3 --save-dev 

接下来在.babelrc 配置

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    "transform-object-rest-spread"
  ],
  "presets": [
    ["es2015", { "modules": false }],"stage-3"
  ]
}

如果报es2015错误
安装模块 babel-plugin-transform-object-rest-spread

cnpm install babel-plugin-transform-object-rest-spread --save-dev

以上便是本人对vuex中使用mapStations、mapMutations、mapState、mapGetters在modules中的迷惑的理解，希望能帮助到大家