Vuex中Getters、Mutations与Actions协作及Action触发方法咨询

问题描述 #

我在个人项目中使用Vue3，对Vuex各属性的协作方式感到好奇，现咨询相关问题，若有重复还请见谅。

我已按如下方式配置Vuex store：

// store/index.js
import { createStore } from "vuex";
import axios from "axios";
let connected = false;
axios.defaults.withCredentials = true;
axios.defaults.baseURL = import.meta.env.VITE_BASE_URL;
export default createStore({
  state: {
    connected,
  },
  getters: {
    getConnected: (state) => {
      return state.connected;
    },
  },
  mutations: {
    setConnected(state, isConnected) {
      console.log("in mutations");
      return (state.connected = isConnected);
    },
  },
  actions: {
    isConnected: ({ commit }) => {
      axios
        .get("/auth/me")
        .then(() => {
          console.log("here positive");
          commit("setConnected", true);
        })
        .catch(() => {
          console.log("here negative");
          commit("setConnected", false);
        });
    },
  },
  modules: {},
});

我理解state是存储的数据，mutations是对state的操作，actions通过commit操作mutations。以下是我的Vue页面代码：

<template>
  <v-row justify="start">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link :to="connected ? '/me' : '/signup'">{{
        connected ? "Profile Page" : "Sign up"
      }}</router-link>
      |
      <router-link :to="connected ? '/logout' : '/login'">{{
        connected ? "Logout" : "Login"
      }}</router-link>
    </nav>
  </v-row>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
export default {
  name: "NavBar",
  data() {
    return {
      connected: false,
    };
  },
  methods: {
    ...mapGetters(["getConnected"]),
    ...mapActions(["isConnected"]),
  },
  mounted() {
    this.connected = this.getConnected();
    console.log("connected", this.connected);
  },
};
</script>

<style>
nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

我的问题是：如何触发Vuex中的actions？是否需要通过mapActions显式调用对应的方法，还是我遗漏了什么配置？

解决方案 #

触发Vuex的actions有几种常见方式，结合你的代码场景，具体如下：

1. 通过mapActions映射后显式调用 #

你已经用...mapActions(["isConnected"])把action映射到了组件的methods里，现在只需要在合适的生命周期或事件中直接调用这个方法即可。比如在组件的mounted钩子中触发，用来检查用户登录状态：

mounted() {
  // 先调用action获取最新的登录状态
  this.isConnected().then(() => {
    // 状态更新后，再从getter获取最新值
    this.connected = this.getConnected();
    console.log("connected", this.connected);
  });
}

注意：因为isConnected是异步action（内部有axios请求），所以需要用then等待请求完成后再更新组件内的connected值，否则会拿到初始的false。

2. 直接通过this.$store.dispatch调用 #

如果不想用mapActions，也可以直接通过Vuex实例的dispatch方法触发action，无需映射：

mounted() {
  this.$store.dispatch('isConnected').then(() => {
    this.connected = this.getConnected();
    console.log("connected", this.connected);
  });
}

3. 优化建议：让组件数据和Vuex状态联动 #

你现在在组件内声明了connected变量来同步Vuex的状态，其实可以直接在组件中使用computed属性来关联getter，这样Vuex状态更新时，组件会自动响应，无需手动赋值：

// 替换data和mounted中的相关代码
computed: {
  ...mapGetters(["getConnected"]),
  // 直接用getter的值作为组件的connected
  connected() {
    return this.getConnected();
  }
},
mounted() {
  // 只需要触发action更新状态即可，组件会自动同步
  this.isConnected();
}

这样修改后，当Vuex的connected状态变化时，组件的connected会自动更新，导航链接的文本和跳转地址也会实时变化。

内容的提问来源于stack exchange，提问作者Fares