Vuex 中 State 的用法？

推荐答案

在 Vuex 中，State 是存储应用程序状态的地方。它是一个单一的状态树，所有的组件都可以通过 this.$store.state 来访问这个状态。State 是响应式的，当 State 发生变化时，依赖它的组件会自动更新。

// www.javascriptcn.com code example
// 在 Vuex store 中定义 state
const store = new Vuex.Store({
  state: {
    count: 0
  }
});

// 在组件中访问 state
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  }
};

本题详细解读

1. State 的定义

State 是 Vuex 中的核心概念之一，它用于存储应用程序的全局状态。State 是一个普通的 JavaScript 对象，通常会在创建 Vuex store 时定义。

// www.javascriptcn.com code example
const store = new Vuex.Store({
  state: {
    count: 0,
    user: {
      name: 'John Doe',
      age: 30
    }
  }
});

2. 访问 State

在 Vue 组件中，可以通过 this.$store.state 来访问 State。为了更方便地访问 State，通常会使用 mapState 辅助函数将 State 映射到组件的计算属性中。

// www.javascriptcn.com code example
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState({
      count: state => state.count,
      userName: state => state.user.name
    })
  }
};

3. State 的响应性

Vuex 的 State 是响应式的，这意味着当 State 发生变化时，依赖它的组件会自动更新。这是通过 Vue 的响应式系统实现的。

4. 修改 State

虽然可以直接修改 State，但这并不是推荐的做法。为了确保状态变化的可追踪性，应该通过 Mutations 来修改 State。

// www.javascriptcn.com code example
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

// 在组件中提交 mutation
this.$store.commit('increment');

5. 使用 Getters 派生 State

有时需要从 State 中派生出一些状态，这时可以使用 Getters。Getters 类似于计算属性，可以对 State 进行加工处理。

// www.javascriptcn.com code example
const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Learn Vue', done: true },
      { id: 2, text: 'Learn Vuex', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done);
    }
  }
});

// 在组件中访问 getter
export default {
  computed: {
    doneTodos() {
      return this.$store.getters.doneTodos;
    }
  }
};

6. 模块化 State

在大型应用中，State 可能会变得非常复杂。为了更好的组织代码，可以将 State 分割成模块。每个模块都有自己的 State、Mutations、Actions 和 Getters。

// www.javascriptcn.com code example
const moduleA = {
  state: () => ({
    count: 0
  }),
  mutations: {
    increment(state) {
      state.count++;
    }
  }
};

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

// 在组件中访问模块化的 state
export default {
  computed: {
    count() {
      return this.$store.state.a.count;
    }
  }
};