vuex核心概念解析及使用

vuex作为vue状态管理工具还是非常好用的，在这里记录一下使用过程。
vuex的核心概念只有四个，只要掌握了这四个的基本使用方法即可将vuex玩弄于手掌之中。

state getters actions mutations

一、组件访问state的两种方法

第一种：（常用d比较优雅的方式）

1. 从vuex 种按需导入 mapState 函数

import { mapState } from 'vuex'

2. 将全局数据映射到当前组件的计算属性中

computed: {
 	...mapState(['name'])
 }

第二种：直接在组件中使用
this.$store.state.全局数据名称
如果是在<template> {{ $store.state.全局数据名称 }}</template> 可以省略 this

二、组件访问Getters

第一种方式：

this.$store.getters.名称

第二种方式：

import { mapGetters } from 'vuex'
computed:{
	...mapGetters(['name'])
}

三、组件中访问mutations方法

mutations 中的方法是唯一能修改state值的方式。

第一种使用方式通过commit：
在methods的方法中使用this.$store.commit('mutation方法名','可传额外参数')
案例：

第二种方式：（比较推荐的优雅的处理方式）

import { mapMutations } from 'vuex'
methods:{
	...mapMutations(['mutation方法名'])
}

四、组件中使用action方法

action 是用来异步触发任务来执行mutation 中 的方法来修改state数据

第一种方式通过dispatch：
this.$store.dispatch('actions中的方法',params)
如果需要触发的是模块中action 则需要加上模块名称例如user/

this.$store.dispatch('user/login', this.loginForm)

第二种方式：

import { mapActions } from 'vuex'
methods:{
	...mapActions (['action方法名'])
}

最后补充一点 Modules

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules,
  getters
})

export default store