本文是vue/cli2.x脚手架下src目录下store篇,完整项目结构参照vue-cli 2.x项目模板文件说明(一)整体结构篇
4.store目录
(1)module
状态管理的模板页,如果状态管理本身比较复杂的话,可将每个组件的状态单独建立一个模板,然后由同目录下store.js统一导出,方便维护
示例文件
const state = {
limit: 30
}
const mutations = {
changeLimit(state, n){
state.limit = n
}
}
const getter = {
}
const commit = {
}
export default {
state,
mutations,
getter,
commit
}
(2) store.js
import Vue from 'vue'
import vuex from 'vuex'
import global from '@/store/modules/global.js'
Vue.use(vuex)
export default new vuex.Store({
modules: {
global
}
})
(3) 使用时 *.vue中
<script>
export default {
data () {
return {
limit: this.$store.state.global.limit
}
}
}
</script>
注:分模块调用时,除state采用分模块写法,其他均采用正常写法,如在*.vue中
<script>
export default{
methods: {
setLimit (n) {
this.$store.commit('changeLimit', n)
}
}
}
</script>
此处this.$store.commit(‘changeLimit’, n)写法中,'changeLimit’与global.js中导出规则有关,比如在vuex官网中
const moduleA = {
state: { ... },
mutations: {
changeLimit(state, n){
state.limit = n
}
},
actions: { ... }
}
调用时为 this.$store.commit(‘moduleA/changeLimit’, n)