02vuex-modules

01===>
module的理解：将一个大的系统进行拆分 拆分成若干个细的模块
给个模块都有自己的 state  mutations  等属性
这样可以在自己的小模块中进行修改 方便维护

module的简单使用
(1)创建main.js(首页)在store.js同级中  （2）store.js中引入  （3）modules的形式注册
在store.js中写
{
    // Vuex 仓库文件(入口)
    import Vue from 'vue'   import Vuex from 'vuex'   //全局注册Vue.use(Vuex)

    // 引入子模块（add）
    import shopcar from "./ShopCar"
    import main from "./main"


    // 创建一个状态厂库  并且将它暴露出去 export default
    const store=new Vuex.Store({
        modules:{
            // key:(模块名)  value(对应模块的配置)
            shopcar, //它相当于把shopcar.js暴露的那个对象放置在这里
            main
        }
    })

    // 取各个模块的值
    console.log(store.state.shopcar.name)  //这样可以拿到可拿到 购物出的的name值为   “我的值是购物车”
    console.log(store) //下面为输出的值
    /* 
    state: Object
    main: Object
    shopcar: Object
    */
    export default store
}

然后创建main.js(首页)
{
    export default{
        state: {
        val: "主文件需要的值",
        name: "我的值是主文件"
        },
        mutations:{

        },
    }
}

02====》如何在商家页面Merchant.vue 获取到 modules模块中--shangjia.js中state的数据

ps===>在main.js文件中  key值是不能够改名字的  value是引入进来的那个文件名
key:vaulue相同的话可以简写

main.js
{
    //引入store实例
    import storeaa from "./store/store";

    new Vue({
    router,
    store: storeaa, //这里是key:value的形式  这里是不能够改变的哦  key 的固定的值是store  value的值可以跟引入的实例对象一致即可
    // 这这里注册store后，全局可以共享 store了
    render: h => h(App)
    }).$mount("#app");

}

store.js
{
    import Vue from 'vue'    import Vuex from 'vuex'    Vue.use(Vuex)

    // 引入子模块 （千万别忘记了）
    import shopcar from "./ShopCar"
    import main from "./main"
    import shangjia from './shangjia'

    // 创建一个状态厂库  并且将它暴露出去 export default
    const store=new Vuex.Store({
        modules:{
            // key:(模块名)  value(对应模块的配置)
            shopcar, //它相当于把shopcar.js暴露的那个对象放置在这里
            main,
            shangjia
        }

    })
    export default store
}

shangjia.js  modules中管理商家模块的数据
{
   export default {
        state:{
            val:"我是商家页面数据",
            name:"哈哈哈商家"
        } 
   }
}

Merchant.vue获取shangjia.js中state的数据
{
  <template>
    <div>
        <p>{{ test }}</p>   
    </div>
 </template>

 export default {
  data(){
    return{
      test:"",
    }
  }, 
  
  created() {
    this.test=this.$store.state.shangjia.val;
     },
  }
 
}

03===》 利用computed：{}计算属性提高性能 例2不变  
利用computed只要母体数据不发生改变  它就不会发生改变

添加 Merchant.vue中
{
  将值渲染出来
  <h2>为了提升性能 {{test1}}</h2>


  computed: {
    test1() {
      return this.$store.state.shangjia.name;  //返回 “哈哈哈商家”
    }
  },

}

04===>将所有的数据放在store.js的data中  
两个页面的代码一模一样  A页面点击加1  B页面数字同样发生改变

ps===>在利用modules模块来管理数据的时候  你需要在store.js  引入相应的子模块 如例2
如果将所有的数据 都放在store.js 的data中饭就不需要  引入相应的子模块

ps===> 只要你去修改state中的值 你就考虑写mutations 
 
A.vue页面  B.vue页面  
{
    <template>
    <div>
        <button @click="clickDec">-</button>
        <span>  {{ num }} </span>   
        <button @click="addNum">+</button>
    </div>
    </template>

    export default {
    data() {
        return {
        test: ""
        };
    },
    methods:{
        addNum(){
        // 提交一个mutations ，改变state中的值 相调用mutations中的addNum函数
           this.$store.commit("addNum")    
        },

        clickDec(){
          this.$store.commit("clickDec")    
        }
    },

    computed:{
        num(){
          return this.$store.state.num
        }
    },
 };
}

store.js
{
    import Vue from 'vue'   import Vuex from 'vuex'     Vue.use(Vuex)

    // 创建一个状态厂库  并且将它暴露出去 export default
    const store=new Vuex.Store({
        state(){
        return{
            test:"我输测试数据",
            num:0
        } 
        },

        mutations:{
            addNum(state){
                    state.num++;
            },
            clickDec(state) {
                state.num--;
            },
        }

    })
    export default store

}

5====》对例4进行优化    this.$store.commit("chang",1)    传参 判断出入的值正数还是负数  负数不能小于0

A页面 B页面  简化了代码
{
  <button @click="clickDec">-</button>
    <span>  {{ num }} </span>   
  <button @click="addNum">+</button>
   

  methods:{
    addNum(){
      // 提交一个mutations ，改变state中的值  用了第一种方式
      this.$store.commit("chang",1)    
    },

    clickDec(){ //如果小于0  不执行改函数
      if(this.$store.state.num==0){ //不能将这一条语句放在 最后 将没有意义
          return;
      }
      this.$store.commit("chang",-1)   
      // console.log(this.$store.state.num)
    }
  },
}

store.js 简化了
{
  mutations: {
    chang(state, zhi) {
      state.num += zhi;
    }
  }
}

猜你喜欢