通过一个简单的例子学会vuex与模块化(3)
// tab2.vue
<template>
<div>
<p>这是tab2的内容</p>
<strong @click="change">点击使用muttion修改模块tab2的内容：{{info}}</strong>
<h4>{{newInfo}}</h4>
</div>
</template>
<script>
export default {
mounted() {
// console.log(this.$store.commit('change2'))
},
computed: {
info: function() {
return this.$store.state.tab2.name;
},
newInfo(){
return this.$store.getters.name;
}
},
methods: {
change() {
this.$store.commit('change2')
}
}
};
</script>
<style lang="" scoped>
</style>
这个例子里主要是看怎么在页面中调用模块中的stated等。
首先说state，这个很简单，在页面中这样写就行：
this.$store.steta.tab2(模块名).name
在本页面的mounted中console一下$store,可以看到模块中，stete加了一层嵌套在state中的。
至于action,mutation,getter，和一般的使用方法一样，没有任何区别。
还有就是，在getter和action中，可以通过rootState获得根结构的state，mutation中没有此方法。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对黑区网络的支持。