Vuex Storeベース

Vuex
VuexはVue専用です.jsアプリケーション開発のステータス管理モード.集中型ストレージ管理アプリケーションのすべてのコンポーネントのステータスを採用し、対応するルールでステータスが予測可能な方法で変化することを保証します.
インストール
npm i vuex -S
使用

// store.js   
import Vuex from 'vuex'
import defaultState from './state/state'
import mutations from './mutations/mutations'
import getters from './getters/getters'
export default ()=>{
	return new Vuex.Store({
		strict: true, 
		//     this.$store.state.count=3    ，   ，       
		state:defaultState,  //     
		mutation,	//         
		getters,  //   vue  computed
		actions, //         
	})
}

//   
import createStore from './store/store'
Vue.use(Vuex)
const store = createStore()
...
//   
this.$store.state.count   //state
this.$store.commit('   ', param)  //mutations
this.$store.dispatch('   ', param) //actions

同時にvuexは、vueで定義する便利な方法を提供します.

import { mapState, mapGetters, mapActions, mapMutations} from 'vuex'
...
computed:{
	...mapState(['count']),  //  
	...mapState({
		counter:'count',
		counter:(state) => state.count 
	}),
	...mapGetters(['     '])
}
methods:{
	...mapActions(['     '])
	...mapMutations(['     '])
}

Vuexモジュール化

// store.js
...{
	modules:{
		a:{
			namespaced: true,  //   false，  mutations         
			state:{ text: 1 },
			mutations:{   
				updateText(state,text){
					state.text = text
				}
			},
			getters:{
				textPlus(state, getter, rootState){  
					//   rootState         
					return state.text + rootState.count + rootState.b.text
				}
			}，
			actions:{
				add({ state, commit, rootState}){
					commit('updateText', rootState.count)
					commit('updateCount', rootState, {root:true})
					//    root:true             
				}
			} 
		},
		b:{ state:{ text: 2 } }
	}
}
...
vue   
this.$store.state.a.text  //1
this.$store.state.b.text  //2...
...mapMutations(['a/updateText'])
...mapMutations({
	updataText: state => state.a.updateText
})

拡張
ESをサポートする最新の構文

cnpm i babel-preset-stage-1 -D