网站在百度上搜不到,全国信息企业公示系统,网站设计公司南京,石岩做网站哪家好目录 一、引言
二、模块化拆分创建方式
三、模块化拆分完整代码
3.1. index.js
3.2. module1.js
3.3. module2.js
3.4. module3.js
3.5. main.js
3.6. App.vue
3.7. Son1.vue
3.8. Son2.vue
四、访问模块module的state
五、访问模块中的getters
六、mutati…目录 一、引言
二、模块化拆分创建方式
三、模块化拆分完整代码
3.1. index.js
3.2. module1.js
3.3. module2.js
3.4. module3.js
3.5. main.js
3.6. App.vue
3.7. Son1.vue
3.8. Son2.vue
四、访问模块module的state
五、访问模块中的getters
六、mutations修改模块的state
七、action修改模块的state 一、引言
由于 vuex 使用单一状态树应用的所有状态会集中到一个比较大的对象。 当应用变得非常复杂时store 对象就有可能变得相当臃肿也就是当我们的项目变得越来越大的时候Vuex会变得越来越难以维护。 二、模块化拆分创建方式
这个时候我们就需要考虑到模块的拆分将不同功能模块对应的store由单独的index.js进行管理比如我们有module1、module2、module3三个业务模块我们将三个模块挂载到store目录下的index.js中统一管理 三、模块化拆分完整代码
3.1. index.js
// 存放的是vuex相关的核心代码
import Vue from vue
import Vuex from vuex
import module1 from ./module1/module1
import module2 from ./module2/module2
import module3 from ./module3/module3// 配置插件给Vue使用
Vue.use(Vuex)// 创建仓库空仓库
const store new Vuex.Store({// 严格模式有利于初学者检测不规范的代码 上线的时候可以去掉strict: true,// 1. 通过 state提供数据所有组件可以共享state: {title: 大标题,count: 100,list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]},// 2. 通过 mutations 可以提供修改数据的方法mutations: {// 所有mutation函数第一个参数都是 stateaddCount (state, n) {// 修改数据state.count n},subCount (state, n) {// 修改数据state.count - n},changeTitle (state, obj) {state.title obj.newTitle},changeCount (state, newCount) {state.count newCount}},// 3. actions处理异步它不能直接操作state操作state还是需要commit mutationactions: {// context 上下文 此处因为我们还未分模块可以当成store仓库// context.commit(mutation名字, 额外参数)changeCountAction (context, num) {// 这里是setTimeout模拟异步以后大部分场景是发请求setTimeout(() {context.commit(changeCount, num)}, 1000)}},// 4. getters 类似于计算属性getters: {// 注意点// 1. 形参第一个参数就是state// 2. 必须有返回值返回值就是getters的值filterList (state) {return state.list.filter(item item 5)}},modules: {module1,module2,module3}
})// 导出给main.js使用
export default store3.2. module1.js
const state {favourite: 骑行,desc: 爱好
}const mutations {}
const actions {}
const getters {}export default {state,mutations,actions,getters
}3.3. module2.js
const state {age: 34,desc: 年龄
}const mutations {}
const actions {}
const getters {}export default {state,mutations,actions,getters
}3.4. module3.js
const state {name: 王哲晓,desc: 姓名
}const mutations {}
const actions {}
const getters {}export default {state,mutations,actions,getters
}3.5. main.js
import Vue from vue
import App from ./App.vue
import store from /store/index
console.log(store.state.count)Vue.config.productionTip falsenew Vue({render: h h(App),store
}).$mount(#app)3.6. App.vue
templatediv idapph1根组件 - {{ title }} - {{ count }}/h1input :valuecount inputhandleInput typetextSon1/Son1hrSon2/Son2/div
/templatescript
import Son1 from ./components/Son1.vue
import Son2 from ./components/Son2.vue
import { mapState } from vuexexport default {name: app,created () {console.log(this.$store.state.count)},data () {return {}},methods: {handleInput (e) {// 1.实时获取输入框的值const num e.target.value// 2.提交mutation调用mutation函数this.$store.commit(changeCount, num)}},computed: {...mapState([count, title])},components: {Son1,Son2}
}
/scriptstyle/style3.7. Son1.vue
templatediv classboxh2{{ $store.state.title }}/h2从vuex中获取的值label{{ $store.state.count }}/labelbr /button clicksubCount(1)值 1/buttonbutton clicksubCount(5)值 5/buttonbutton clicksubCount(10)值 10/buttonbutton clickhandleSub(1)值 - 1/buttonbutton clickhandleSub(5)值 - 5/buttonbutton clickhandleSub(10)值 - 10/buttonbutton clickhandleChange(34)值 34/buttonbutton clickchangeTitle改标题/buttonbutton clickchangeCountAction(6666)1秒钟后化神/buttonhr /div{{ $store.state.list }}/divdiv{{ $store.getters.filterList }}/divhr /div{{ filterList }}/div/div
/templatescript
import { mapMutations, mapActions, mapGetters } from vuex
export default {name: Son1Com,computed: {...mapGetters([filterList])},methods: {handleAdd (n) {// 错误代码vue默认不会监测监测需要成本// this.$store.state.count// console.log(this.$store.state.count)// 应该通过 mutation 核心概念进行修改仓库数据// 需要提交调用mutationthis.$store.commit(addCount, n)},...mapMutations([subCount]),...mapActions([changeCountAction]),changeTitle () {this.$store.commit(changeTitle, {name: 王哲晓,newTitle: 2024加油迎接新的开始新的起点新的人生})},handleChange (n) {// 调用action// this.$store.dispatch(action名字, 额外参数)this.$store.dispatch(changeCountAction, n)}}
}
/scriptstyle langcss scoped
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
/style3.8. Son2.vue
templatediv classboxh2Son2 子组件/h2从vuex中获取的值label{{ count }}/labelbrbutton值 - 1/button/div/templatescript
import { mapState } from vuex
export default {name: Son2Com,computed: {...mapState([count])}
}
/scriptstyle langcss scoped
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
/style四、访问模块module的state
虽然我们已经对store进行了分模块但其实子模块的状态还是会挂到根级别的state 中属性名就是模块名
使用模块中的数据
① 直接通过模块名访问 $store.state.模块名.xxx ② 通过 mapState 映射
默认根级别的映射 mapState([ xxx ]) 子模块的映射 mapState(模块名, [xxx]) - 需要开启命名空间 五、访问模块中的getters
使用模块中 getters 中的数据
① 直接通过模块名访问 $store.getters[模块名/xxx ] ② 通过 mapGetters 映射
默认根级别的映射 mapGetters([ xxx ])
子模块的映射 mapGetters(模块名, [xxx]) - 需要开启命名空间 六、mutations修改模块的state
默认模块中的 mutation 和 actions 会被挂载到全局需要开启命名空间才会挂载到子模块。
调用子模块中的mutation方法
① 直接通过 store 调用 $store.commit(模块名/xxx , 额外参数) ② 通过 mapMutations 映射
默认根级别的映射 mapMutations([ xxx ])
子模块的映射 mapMutations(模块名, [xxx]) - 需要开启命名空间 七、action修改模块的state
action的修改调用语法直接类比mutation即可默认模块中的 mutation 和 actions 会被挂载到全局需要开启命名空间才会挂载到子模块。
调用子模块中 action
① 直接通过 store 调用 $store.dispatch(模块名/xxx , 额外参数) ② 通过 mapActions 映射
默认根级别的映射 mapActions([ xxx ])
子模块的映射 mapActions(模块名, [xxx]) - 需要开启命名空间
