Skip to content

Natsumeaiovo/windoj-frontend

Repository files navigation

目录下的store是什么?和Vuex有什么关系?actions和mutations都是方法,有啥区别呢?

store是一个目录,通常在Vue.js项目中用于存放Vuex的状态管理相关的代码。在你的项目中,store目录下的index.ts文件创建了一个Vuex的store。

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex的store就像一个容器,包含了应用中大部分的状态(state)。

在你的项目中,store目录下的index.ts文件中,使用了createStore方法创建了一个Vuex的store。这个store包含了一个名为user的模块,这个模块可能包含了一些关于用户的状态信息以及对应的mutations和actions。

import { createStore } from "vuex";
import user from "./user";

export default createStore({
  mutations: {},
  actions: {},
  modules: {
    user,
  },
});

在这段代码中,mutationsactions是空的,这意味着全局的状态变化和异步操作都在user模块中处理。modules字段表示这个store包含了一个或多个模块,每个模块都有自己的状态、mutations和actions。

在Vuex中,mutationsactions都是用来改变store中的状态的,但是它们的使用场景和方式有所不同。

  1. mutations:是同步的,用于更改状态。每个mutation都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,它会接受state作为第一个参数。你不能在这里执行异步操作,这是因为当我们在组件中使用mapMutations辅助函数绑定事件时,如果是异步的话,我们没有办法知道何时回调函数会被调用,也就无法知道状态何时会被实际改变。
mutations: {
  updateUser(state, payload) {
    state.loginUser = payload;
  },
}
  1. actions:可以包含任意异步操作。Action 类似于 mutation,不同在于:
    • Action 提交的是 mutation,而不是直接变更状态。
    • Action 可以包含任意异步操作。

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.statecontext.getters 来获取 state 和 getters。

actions: {
  getLoginUser({ commit, state }, payload) {
    // todo 改为从远程请求获取登录信息
    commit("updateUser", payload);
  },
}

在这个例子中,getLoginUser action 可能会从服务器获取数据,然后提交一个 mutation 来改变状态。而这个操作是异步的,所以我们需要使用 action 而不是直接使用 mutation。

Releases

No releases published

Packages

No packages published

Languages