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