创建文件
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)