02vuex-modules

Posted 2022-05-24 iwishicould

 

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;