Vuex 模块化写法

创建文件

store

在store文件夹下，把不同功能的模块放在不同的js文件中。

在 store/index.js文件中，导入 count.js 和 person.js

store/index.js的代码内容

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import countOptions from './count'
import personOptions from './person'
//应用Vuex插件
Vue.use(Vuex)

//创建并暴露store
export default new Vuex.Store({
	modules:{
		countAbout:countOptions,
		personAbout:personOptions
	}
})

在 modules:{ }，给不同的模块取名：countAbout，personAbout；

main.js

在main.js中，导入store

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//引入store
import store from './store'

//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store,
	beforeCreate() {
		Vue.prototype.$bus = this
	}
})

除了引入，还得把store添加在 new Vue({ store})中；

简化写法：

	computed:{
			//借助mapState生成计算属性，从state中读取数据。（数组写法）
			...mapState('countAbout',['sum','school','subject']),
			...mapState('personAbout',['personList']),
			//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
			...mapGetters('countAbout',['bigSum'])
		},
		methods: {
			//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
			...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
			//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
			...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
		},

基础写法：
computed中获取state的数据

在state后面加模块化的名字

• this.$store.state.personAbout.personList;

this.$store.getters['personAbout/firstPersonName']
this.$store.commit('personAbout/ADD_PERSON',personObj)
this.$store.dispatch('personAbout/addPersonWang',personObj)

点击查看代码