天津响应式网站,天津网站备案在哪照相,厦门建设与管理局官网,玉林seo文章目录 1#xff0c;入门案例辅助函数 2#xff0c;mutations传参辅助函数 3#xff0c;actions辅助函数 4#xff0c;getters辅助函数 5#xff0c;模块拆分6#xff0c;访问子模块的state辅助函数 7#xff0c;访问子模块的getters辅助函数 8#xff0c;访问子模块… 文章目录 1入门案例辅助函数 2mutations传参辅助函数 3actions辅助函数 4getters辅助函数 5模块拆分6访问子模块的state辅助函数 7访问子模块的getters辅助函数 8访问子模块的mutations辅助函数 9访问子模块的actions辅助函数 1入门案例
安装库。
npm install vuex3新建store.js。
import Vue from vue
import Vuex from vuexVue.use(Vuex)const store new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count}}
})export default storemain.js。
new Vue({render: h h(App),store
}).$mount(#app)最后计数器案例。
templateh1 clickadd{{ $store.state.count }}/h1
/templatescript
export default {name: App,methods: {add() {this.$store.commit(increment)}}
}
/script效果 辅助函数
可以将数据自动变成计算属性。
templateh1 clickadd{{ count }}/h1
/templatescript
import { mapState } from vuex;
export default {name: App,methods: {add() {this.$store.commit(increment)}},computed: {...mapState([count])}
}
/script2mutations传参
跟着后面写就行只能传一个参数。
const store new Vuex.Store({state: {count: 0},mutations: {increment(state, v) {state.count v}}
})this.$store.commit(increment, 5)辅助函数
可以将mutations自动变成方法。
templateh1 clickincrement(5){{ count }}/h1
/templatescript
import { mapState, mapMutations } from vuex;
export default {name: App,methods: {...mapMutations([increment])},computed: {...mapState([count])}
}
/script3actions
异步操作数据。
const store new Vuex.Store({state: {count: 0},mutations: {increment(state, v) {state.count v}},actions: {incrementAction(context, v) {setTimeout(() {context.commit(increment, v)}, 1000)}}
})this.$store.dispatch(incrementAction, 5)辅助函数
可以将actions自动变成方法。
templateh1 clickincrementAction(5){{ count }}/h1
/templatescript
import { mapState, mapMutations, mapActions } from vuex;
export default {name: App,methods: {...mapActions([incrementAction]),...mapMutations([increment])},computed: {...mapState([count])}
}
/script4getters
派生状态类似于计算属性。
const store new Vuex.Store({state: {count: 0},mutations: {increment(state, v) {state.count v}},actions: {incrementAction(context, v) {setTimeout(() {context.commit(increment, v)}, 1000)}},getters: {count1(state) {return state.count 个}}
})$store.getters.count1 辅助函数
可以将getters自动变成计算属性。
templateh1 clickincrementAction(5){{ count1 }}/h1
/templatescript
import { mapState, mapMutations, mapActions, mapGetters } from vuex;
export default {name: App,methods: {...mapActions([incrementAction]),...mapMutations([increment])},computed: {...mapState([count]),...mapGetters([count1])}
}
/script5模块拆分
新建a.js。
新增了一个配置项namespaced。
export default {namespaced: true,state: {count: 0},mutations: {increment(state, v) {state.count v}},actions: {incrementAction(context, v) {setTimeout(() {context.commit(increment, v)}, 1000)}},getters: {count1(state) {return state.count 个}}
}b.js。
export default {namespaced: true,state: {count: 0},mutations: {increment(state, v) {state.count v}},actions: {incrementAction(context, v) {setTimeout(() {context.commit(increment, v)}, 1000)}},getters: {count1(state) {return state.count 个}}
}改写store.js。
const store new Vuex.Store({modules: {a, b}
})6访问子模块的state
$store.state.a.count
$store.state.b.count辅助函数
templatedivh1{{ count }}/h1/div
/templatescript
import { mapState } from vuex;
export default {computed: {...mapState(a, [count])}
}
/script7访问子模块的getters
$store.getters[a/count1]
$store.getters[b/count1]辅助函数
用法与前面一致。
8访问子模块的mutations
this.$store.commit(a/increment, 1)辅助函数
用法与前面一致。
9访问子模块的actions
this.$store.dispatch(a/incrementAction, 1)辅助函数
用法与前面一致。
