通过一个简单的例子学会vuex与模块化

在本例子中，我设置了两个模块：tab2和tab3，分别对应着同名的两个组件，当然，我这样只是为了测试，实际看tab2就可以。

// module/tab2.js
const tab2 = {
 state: {
 name:`这是tab2模块的内容`
 },
 mutations:{
 change2(state){
  state.name = `我修改了tab2模块的内容`
 }
 },
 getters:{
 name(state,getters,rootState){
  console.log(rootState)
  return state.name + ',使用getters修改'
 }
 }
}
export default tab2;

// 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中没有此方法。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对软件开发网的支持。