vuex subscribeAction用法

Vuex 的 `subscribeAction` 方法用于订阅 Vuex 中的 Action，可以在 Action 执行前后做一些额外的操作，例如打印日志、记录行为等。其使用方法如下：

store.subscribeAction((action, state) => {
  console.log(`action ${action.type} triggered`);
  console.log(`payload: ${action.payload}`);
});

上述代码中，我们通过 `store.subscribeAction` 方法订阅了 Vuex 中的 Action，当 Action 被触发时，会执行回调函数中的代码。回调函数中的 `action` 参数表示当前触发的 Action，`state` 参数表示当前的状态。

需要注意的是，`subscribeAction` 方法只能在创建 store 实例之后调用，且不能在模块中使用。

相关问题

vuex getters用法

在Vuex中，getters用于获取store中的state数据并进行计算或筛选，类似于Vue组件中的computed属性。getters可以被认为是store的计算属性，它们的返回值会被缓存，只有当它所依赖的状态发生改变时才会重新计算。

以下是getters的使用方法：

1. 在store中定义getters

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

2. 在组件中使用getters

<template>
  <div>
    <ul>
      <li v-for="todo in doneTodos" :key="todo.id">{{ todo.text }}</li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'doneTodos'
    ])
  }
}
</script>

在上面的示例中，我们在store中定义了一个名为doneTodos的getter，该getter返回所有已完成的todo。在组件中，我们使用mapGetters将getter映射到计算属性中，并在模板中使用它来渲染已完成的todo列表。

注意，在组件中使用getter时，我们不需要调用它，只需要将它作为一个计算属性使用即可。

vuex actions用法

在 Vuex 中，actions 用于处理异步操作和提交 mutations。它们可以包含任意异步操作，例如从服务器获取数据、处理数据并更新 store 中的 state 数据。

actions 是一个对象，其中每个属性都是一个函数，该函数接收一个 context 对象和一个 payload 参数。context 对象包含了一些属性和方法，例如 commit、dispatch、state 等，可以用来访问 store 中的数据和方法。payload 参数是传递给 action 函数的数据。

下面是一个简单的 actions 示例：

const actions = {
  fetchData({ commit }) {
    axios.get('/api/data')
      .then(response => {
        commit('SET_DATA', response.data)
      })
      .catch(error => {
        console.log(error)
      })
  }
}

上述代码中，我们定义了一个名为 fetchData 的 action 函数，它接收一个 context 对象，我们从中提取了 commit 方法。在 fetchData 函数内部，我们使用 axios 库发送异步请求获取数据，并在成功返回时通过 commit 方法提交一个名为 SET_DATA 的 mutation，将数据更新到 store 中。

在组件中，我们可以使用 dispatch 方法来调用 actions：

methods: {
  fetchData() {
    this.$store.dispatch('fetchData')
  }
}

在上述示例中，我们使用 dispatch 方法调用了名为 fetchData 的 action。在 action 执行完成后，我们可以通过 mutations 更新 store 中的 state 数据，然后在组件中通过 getters 获取更新后的数据。