当前位置: 首页> 房产> 建材 > 久久建筑网能否下载资料_b站推广网站2023年_企业危机公关_seo快速排名工具

久久建筑网能否下载资料_b站推广网站2023年_企业危机公关_seo快速排名工具

时间:2025/7/11 15:40:33来源:https://blog.csdn.net/qq_53922901/article/details/143402838 浏览次数:0次
久久建筑网能否下载资料_b站推广网站2023年_企业危机公关_seo快速排名工具

vuex

  • 知识结构
  • 配置
  • 调用

知识结构

vue用于管理公共数据的仓库

在这里插入图片描述

配置

  • state:所有公共数据的初始状态(初始值)

    export default {state: {count: 0,}
    };
    
  • mutations:修改state内容的方法(必须为同步方法)

    export default {state: {count: 0,},mutations: {increase(state,payload){state.count += payload;}}
    };
    
  • actions:修改state内容的异步相关方法,也需要通过mutations中的方法进行最终修改

    export default {state: {count: 0,},mutations: {increase(state,payload){state.count += payload;}},actions: {asycIncrease(context,payload){setTimeout(() => {context.commit('increase',10);}, 1000)}}
    };
    
  • getters:仓库内的计算属性

    export default {state: {count: 0,},mutations: {increase(state,payload){state.count += payload;}},actions: {asycIncrease(context,payload){setTimeout(() => {context.commit('increase',10);}, 1000)}},getters: {power (state) {return state.count ** state.count;}}
    };
    
  • modules:在仓库内容过多时,避免命名重复或为了结构清晰,可以分为不同的module以此来区分

    // 在创建仓库时配置
    const store = createStore({modules: {a: moduleA,b: moduleB}
    })
    
  • 完整示例配置

    // store配置
    import Vuex from "vuex";
    import Vue from "vue";
    import count from "./count";
    import abc from "./abc";
    Vue.use(Vuex);const store = new Vuex.Store({modules: {count,abc,},strict: true, // 开启严格模式
    });export default store;
    
    // count module 配置
    export default {// namespaced: true, // 开启命名空间state: {count: 0,},mutations: {increase(state,payload){state.count += payload;}},actions: {asycIncrease(context,payload){setTimeout(() => {context.commit('increase',10);}, 1000)}},getters: {power (state) {return state.count ** state.count;}}
    };
    
    // abc module 配置
    export default {state: {abc: '',},mutations: {set(state,payload){state.abc = payload;}},actions: {asycIncrease(context,payload){setTimeout(() => {// 最终还是使用的commitcontext.commit('set',"well");}, 1000)}}
    };
    
  • strict: true,开启严格模式

    规定state中的状态只能通过mutations中的方法改变,但是其实也可以直接使用this.$store.state.count = 1这种改变状态,开启严格模式后使用直接赋值时就会报错

  • namespaced: true,开启命名空间

    当不同module中有同名的方法时,直接commit就容易混乱,打开命名空间后,调用方法就必须加上此module名作为前缀,如下:

    import Vue from "vue";
    import store from "./store";const num = store.getters["count/power"];
    

调用

  • commit

    用于调用mutations中的方法

    <template><div><div id="button"><button @click="handleClick">button</button></div></div>
    </template><script>
    import Vue from "vue";
    import store from "./store";
    export default {methods: {handleClick(){store.commit("count/increase",1);}},
    };
    </script>
    
  • dispatch

    用于调用异步方法

    <template><div><div id="button"><button @click="handleClick">button</button></div></div>
    </template><script>
    import Vue from "vue";
    import store from "./store";
    export default {methods: {handleClick(){store.dispatch("count/asycIncrease",2);}},
    };
    </script>
    
  • mapState:用于让我们方便的使用计算属性封装state,有多种写法

    import { mapState } from 'vuex'export default {computed: mapState({count: state => state.count,})
    }export default {computed: {count: ...mapState("count", ["count"]);}
    }
    
  • mapGetters:将 store 中的 getter 映射到局部计算属性,这种map函数几乎都是这样的作用

    import { mapGetters } from 'vuex'export default {computed: {// 使用对象展开运算符将 getter 混入 computed 对象中...mapGetters('count',['power'])}
    }
    
  • mapMutations:简化函数封装

    import { mapMutations } from 'vuex'export default {// ...methods: {...mapMutations('count',['increase', // 将 `this.increase()` 映射为 `this.$store.commit('increase')`]),}
    }
    
  • mapActions:简化异步方法封装

    import { mapActions } from 'vuex'export default {methods: {...mapActions('count',['asycIncrease', // 将 `this.asycIncrease()` 映射为 `this.$store.dispatch('asycIncrease')`})}
    }
    
关键字:久久建筑网能否下载资料_b站推广网站2023年_企业危机公关_seo快速排名工具

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: