美文网首页
Vuex状态管理

Vuex状态管理

作者: 杨斌_1024 | 来源:发表于2020-09-26 23:02 被阅读0次

    概述

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

    Vuex

    核心概念用法

    state

    store中使用state存储状态

    在组件中访问state:

    import { mapGetters, mapMutations, mapState } from 'vuex';

    1.this.$store.state.name;

    2....mapState(['age'])

    mapState获取state

    Getter

    store中的getters

    在组件获取getters:

    1.this.$store.getters.nameInfo;

    2....mapGetters([ 'nameInfo']);

    getters

    Mutation

    使用mutations同步update 状态

    mutations 更新状态的用法:

    import { mapMutations,mapActions } from "vuex";

    1....mapMutations({SOME_MUTATION:'SOME_MUTATIONf' }),在组件中this.SOME_MUTATION("setTypesName");更新状态。

    2.store.commit("setName", "新的name");

    3.Vue.set(store.state, "name", "vueName");

    4.Vue.delete(store.state, "name");

    更新mutation

    actions

    actions用来操作异步

    actions的用法:

    import { mapMutations,mapActions } from "vuex";

    1. ...mapActions({incrementAsync: 'incrementAsync'  }), 组件中可以直接使用this.incrementAsync().

    2.this.$store.dispatch('incrementAsync',"dddddffff");     将 `this.incrementAsync()` 映射为 `this.$store.dispatch('increment')`;

    actions

    Module

    编写module 在index中导入 在组件中使用

    参考文献

    vuex官网

    相关文章

      网友评论

          本文标题:Vuex状态管理

          本文链接:https://www.haomeiwen.com/subject/xuihuktx.html