跳到主要内容

Vuex状态和getter

在Vue.js应用中，随着应用规模的增大，组件之间的状态共享和管理变得越来越复杂。Vuex是Vue.js官方推荐的状态管理库，它通过集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。本文将详细介绍Vuex中的状态（state）和getter，帮助你理解如何在实际项目中管理和访问全局状态。

什么是Vuex状态（state）？​

在Vuex中，**状态（state）**是存储应用数据的地方。它是一个单一的状态树，所有组件的共享状态都存储在这里。你可以将state理解为一个全局的、响应式的对象，任何组件都可以访问和修改它。

定义状态​

在Vuex中，状态通常定义在state对象中。以下是一个简单的例子：

javascript
const store = new Vuex.Store({
  state: {
    count: 0,
    user: {
      name: 'John Doe',
      age: 30
    }
  }
});

在这个例子中，state对象包含了两个属性：count和user。count是一个简单的数字，而user是一个包含用户信息的对象。

访问状态​

在组件中，你可以通过this.$store.state来访问Vuex中的状态。例如：

javascript
export default {
  computed: {
    count() {
      return this.$store.state.count;
    },
    userName() {
      return this.$store.state.user.name;
    }
  }
};

在这个例子中，count和userName计算属性分别返回了state中的count和user.name。

什么是Vuex getter？​

Getter是Vuex中的一种计算属性，它允许你从state中派生出一些状态。Getter可以看作是store的计算属性，它们可以用于对state进行过滤、组合或计算。

定义Getter​

Getter通常定义在getters对象中。以下是一个简单的例子：

javascript
const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Learn Vuex', done: true },
      { id: 2, text: 'Build an app', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done);
    },
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length;
    }
  }
});

在这个例子中，doneTodos getter返回了所有已完成的任务，而doneTodosCount getter返回了已完成任务的数量。

访问Getter​

在组件中，你可以通过this.$store.getters来访问Vuex中的getter。例如：

javascript
export default {
  computed: {
    doneTodos() {
      return this.$store.getters.doneTodos;
    },
    doneTodosCount() {
      return this.$store.getters.doneTodosCount;
    }
  }
};

在这个例子中，doneTodos和doneTodosCount计算属性分别返回了doneTodos和doneTodosCount getter的结果。

实际应用场景​

假设你正在开发一个任务管理应用，你需要显示所有已完成的任务以及已完成任务的数量。你可以使用Vuex的state和getter来实现这个功能。

示例代码​

javascript
const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Learn Vuex', done: true },
      { id: 2, text: 'Build an app', done: false },
      { id: 3, text: 'Deploy app', done: true }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done);
    },
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length;
    }
  }
});

export default {
  computed: {
    doneTodos() {
      return this.$store.getters.doneTodos;
    },
    doneTodosCount() {
      return this.$store.getters.doneTodosCount;
    }
  }
};

在这个例子中，doneTodos getter返回了所有已完成的任务，而doneTodosCount getter返回了已完成任务的数量。组件通过计算属性访问这些getter，并在模板中显示结果。

总结​

Vuex的状态（state）和getter是管理全局状态的重要工具。通过state，你可以集中存储应用的所有状态；通过getter，你可以从state中派生出一些状态，并在组件中使用它们。掌握这些概念将帮助你更好地管理Vue.js应用中的状态。

附加资源​

练习​

  1. 创建一个Vuex store，包含一个products状态和一个filteredProducts getter，filteredProducts getter返回所有价格大于100的产品。
  2. 在组件中使用filteredProducts getter，并在模板中显示结果。

通过完成这些练习，你将更深入地理解Vuex的状态和getter。