vue.js actions和getters

在Vue.js中，使用vuex状态管理库来管理全局状态。其中，actions和getters是vuex中的两个重要概念。

actions用于处理异步操作，例如发送HTTP请求或者其他需要等待结果的操作。它可以包含任意异步操作，并且可以通过commit方法来触发mutations的方法来改变state，也可以通过dispatch方法来触发其他action。

getters用于从state中派生出一些状态，类似于计算属性。它们可以帮助我们根据现有的状态计算出新的状态，并且可以在多个组件中共享和重用。

下面是一个示例，展示了如何在Vue.js应用中使用actions和getters：

// store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0,
    todos: []
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    addTodo(state, todo) {
      state.todos.push(todo);
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    },
    addTodoAsync({ commit }, todo) {
      setTimeout(() => {
        commit('addTodo', todo);
      }, 1000);
    }
  },
  getters: {
    completedTodos(state) {
      return state.todos.filter(todo => todo.completed);
    },
    incompleteTodos(state) {
      return state.todos.filter(todo => !todo.completed);
    }
  }
});

export default store;

在上面的代码中，我们创建了一个名为store的vuex实例，并定义了state，mutations，actions和getters。

在mutations中，我们定义了两个方法：increment和addTodo。这些方法用于更新state中的数据。

在actions中，我们定义了两个方法：incrementAsync和addTodoAsync。这些方法可以执行异步操作，并通过commit方法触发mutations中的方法来更新state中的数据。

在getters中，我们定义了两个方法：completedTodos和incompleteTodos。这些方法可以根据现有的state派生出新的状态，并且可以在组件中使用。

现在我们可以在Vue组件中使用actions和getters：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Completed Todos: {{ completedTodos.length }}</p>
    <p>Incomplete Todos: {{ incompleteTodos.length }}</p>
    <button @click="incrementAsync">Increment Async</button>
    <button @click="addTodoAsync">Add Todo Async</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['completedTodos', 'incompleteTodos'])
  },
  methods: {
    ...mapActions(['incrementAsync', 'addTodoAsync'])
  }
};
</script>

在上面的示例中，我们使用了mapState，mapGetters和mapActions辅助函数来将state, getters和actions映射到组件的computed和methods中，这样我们就可以直接在模板中使用它们。

总结一下，actions用于处理异步操作，并通过commit方法触发mutations来更新state。getters用于派生出新的状态，并在多个组件中共享和重用。通过使用这两个概念，我们可以更好地组织和管理Vue.js应用的全局状态。