vuex的属性有哪些

发布时间：2022-03-04 09:41:26 作者：iii
来源：亿速云阅读：190

Vuex的属性有哪些

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 的核心概念包括 state、getters、mutations、actions 和 modules。本文将详细介绍这些属性的作用和使用方法。

1. State

1.1 定义

State 是 Vuex 中的核心概念之一，它用于存储应用的状态数据。State 是一个单一状态树，所有的组件都可以通过 Vuex 访问到这个状态树中的数据。

1.2 使用

在 Vuex 中定义 state 非常简单，只需要在 store 对象中声明一个 state 属性即可：

const store = new Vuex.Store({
  state: {
    count: 0
  }
});

在组件中可以通过 this.$store.state 来访问 state 中的数据：

export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  }
};

1.3 响应式

Vuex 的 state 是响应式的，当 state 中的数据发生变化时，依赖这些数据的组件会自动更新。

2. Getters

2.1 定义

Getters 用于从 state 中派生出一些状态。类似于 Vue 组件中的计算属性，getters 可以对 state 中的数据进行加工处理，返回一个新的值。

2.2 使用

在 Vuex 中定义 getters 也非常简单，只需要在 store 对象中声明一个 getters 属性即可：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

在组件中可以通过 this.$store.getters 来访问 getters 中的数据：

export default {
  computed: {
    doubleCount() {
      return this.$store.getters.doubleCount;
    }
  }
};

2.3 参数

Getters 可以接收两个参数：state 和 getters。state 是当前模块的 state，getters 是当前模块的 getters。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    },
    doubleCountPlusOne(state, getters) {
      return getters.doubleCount + 1;
    }
  }
});

3. Mutations

3.1 定义

Mutations 是 Vuex 中用于修改 state 的唯一途径。每个 mutation 都有一个字符串类型的事件类型（type）和一个回调函数（handler），这个回调函数就是我们实际进行状态更改的地方。

3.2 使用

在 Vuex 中定义 mutations 也非常简单，只需要在 store 对象中声明一个 mutations 属性即可：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

在组件中可以通过 this.$store.commit 来触发 mutations：

export default {
  methods: {
    increment() {
      this.$store.commit('increment');
    }
  }
};

3.3 参数

Mutations 可以接收两个参数：state 和 payload。state 是当前模块的 state，payload 是触发 mutation 时传递的参数。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state, payload) {
      state.count += payload.amount;
    }
  }
});

在组件中可以通过 this.$store.commit 来触发 mutations 并传递参数：

export default {
  methods: {
    increment() {
      this.$store.commit('increment', { amount: 10 });
    }
  }
};

4. Actions

4.1 定义

Actions 类似于 mutations，不同之处在于：

Actions 提交的是 mutations，而不是直接变更状态。
Actions 可以包含任意异步操作。

4.2 使用

在 Vuex 中定义 actions 也非常简单，只需要在 store 对象中声明一个 actions 属性即可：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});

在组件中可以通过 this.$store.dispatch 来触发 actions：

export default {
  methods: {
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    }
  }
};

4.3 参数

Actions 可以接收两个参数：context 和 payload。context 是一个与 store 实例具有相同方法和属性的对象，payload 是触发 action 时传递的参数。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state, payload) {
      state.count += payload.amount;
    }
  },
  actions: {
    incrementAsync({ commit }, payload) {
      setTimeout(() => {
        commit('increment', payload);
      }, 1000);
    }
  }
});

在组件中可以通过 this.$store.dispatch 来触发 actions 并传递参数：

export default {
  methods: {
    incrementAsync() {
      this.$store.dispatch('incrementAsync', { amount: 10 });
    }
  }
};

5. Modules

5.1 定义

Modules 是 Vuex 中用于将 store 分割成模块的概念。每个模块拥有自己的 state、getters、mutations、actions，甚至是嵌套子模块。

5.2 使用

在 Vuex 中定义 modules 也非常简单，只需要在 store 对象中声明一个 modules 属性即可：

const moduleA = {
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
};

const store = new Vuex.Store({
  modules: {
    a: moduleA
  }
});

在组件中可以通过 this.$store.state.a 来访问模块中的 state：

export default {
  computed: {
    count() {
      return this.$store.state.a.count;
    }
  }
};

5.3 命名空间

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的。如果希望模块具有更高的封装度和复用性，可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。

const moduleA = {
  namespaced: true,
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
};

const store = new Vuex.Store({
  modules: {
    a: moduleA
  }
});

在组件中可以通过 this.$store.commit('a/increment') 来触发带命名空间的 mutation：

export default {
  methods: {
    increment() {
      this.$store.commit('a/increment');
    }
  }
};

6. 总结

Vuex 是一个强大的状态管理工具，它通过 state、getters、mutations、actions 和 modules 等属性，帮助我们更好地管理和维护应用的状态。理解这些属性的作用和使用方法，对于开发复杂的 Vue.js 应用至关重要。通过合理地使用 Vuex，我们可以使应用的状态管理更加清晰、可预测和易于维护。