Vuex design and implementation of data

Vuex data sharing is an important part of the project, this article summarizes the personal use Vuex use in the project.

1. Setting project directory src / store
   in which the actions, getters, mutations, state, abstracted into a single document management. In order to look more concise mutation, the mutation-types also split out unified management.

├──  store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── state.js      # 根级别的 states  
    ├── getters.js      # 根级别的 getters
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── mutation-types.js      # mutation类型

2. index.js

import Vue from 'vue'
import Vuex from 'vuex'
import * as mutations from './mutations'
import * as actions from './actions'
import state from './state'
import createLooger from 'vuex/dist/logger' // 在没有装vue-devtools的情况下可以使用，在控制台会打印出state前后状态变化

Vue.use(Vuex)
const debug = process.env.NODE_ENV === 'production'

export default new Vuex.store({
	state,
	mutations,
	actions,
	getters,
	strict: debug,  // 开发环境下开启严格模式，任何不是由mutation引起更改state的操作都会抛出错误，确保在发布环境下关闭严格模式，以避免性能损失。
	plungins:  debug ? [createLogger()] : []  // 开发环境下开启
})

3. state.js
   global shared data, for example as follows:

export default state = {
	userName: '',
	stationList: [],
	station: {}
}

4. getters.js
   Vuex store allows the definition of the getter, can be considered to calculate the attribute store. It will be recalculated when the value changes.
   getter receiving state as its first parameter.

export const userName = state => state.userName
export const stationList = state => state.stationList
export const station = state => state.station

Since Vuex responsive state is stored, so that in use data can be read using the calculated data from the attribute store instance.

import { mapGetters } from 'vuex
computed: {
	...mapGetters([
		name: 'userName',
		'stationList',
		'station'
	])
}

6. actions.js
   the Action filed for Mutation, without directly modifying state.

import * as types from './mutation-types'
export const selectStation = function({ commit, state }, param) {
	if(state.stationList.length === 0) {
		commit(types.SELECT_STATION, param)
	}
}

You need to use the methods in the use of Action.

import { mapActions } from 'vuex'
methods: {
	...mapActions([
		'selectStation'
	]),
	_changeStation(station) {
		this.selectStation(station)
	}
}

7. mutations.js

import * as types from './mutation-types'
export mutations = {
	[types.SELECT_STATION](state, param) {
		state.station = param
	}
}

8. mutation-types.js
   using constant substitution mutation event types in a variety of Flux implementations are very common pattern. This allows the tool linter like to play a role, but these constants in a separate file in your code allows mutation collaborators included the entire app at a glance:

export const SELECT_STATION = 'SELECT_STATION'

https://github.com/Gesj-yean/vue-demo-collection documented use more outstanding plug-ins. Students have time to look at my top blog can thank you very much.