Question

我试图在Vuex / Vuejs中理解并采取行动

从理论上讲，我明白了

只能从Mutation，Vuex文档中更改状态

在Vuex存储中实际更改状态的唯一方法是提交突变。

突变用于同步，异步用于异步

据此，这可能意味着动作需要调用Mutation才能更改状态

希望我的假设都是正确的，我试图使用Vuex创建我的第一个应用程序。

在该应用中，我有多种状态，例如一种用于userDetails，EventbriteDetails，MeetupDetails 的状态

我为EventbriteDetails编写了此代码

import axiosHelper from "./../../helperFunctions/axios.js"

const state = {
    eventbriteProfileData: null,
    eventbriteProfileLoading: null,
    eventbriteProfileError: null,  
}


const mutations = {
    SET_EVENTBRITE_DATA_LOADING: (state) => {
        state.eventbriteProfileLoading = true
    },
    SET_EVENTBRITE_DATA: (state, payload) => {
        state.eventbriteProfileData = payload,
        state.eventbriteProfileLoading = false,
        state.eventbriteProfileError = false
    },
    SET_EVENTBRITE_ERROR: (state) => {
        state.eventbriteProfileLoading = false,
        state.eventbriteProfileError = false
    }
}

const actions = {
     EVENTBRITE_PROFILE:  async (context, url) => {
        context.commit('SET_EVENTBRITE_DATA_LOADING')
       try {
        let {data} = axiosHelper.makeAxiosGetRequest(url)
        context.commit('SET_EVENTBRITE_DATA', data)
       }
       catch {
        context.commit('SET_EVENTBRITE_ERROR')
       }
     }
}


const getters = {
    GET_EVENTBRITE_DATA: state => {
        return state
    }
}


export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
  };

对于 userDetails，MeetupDetails，EventbriteDetails ，然后在我的index.js中，类似的内容

我做了这样的事情

import Vue from 'vue'
import Vuex from 'vuex'
import User from "./user/userState.js"
import Eventbrite from './eventbrite/eventbriteState.js'
import Meetup from "./meetup/meetupState.js"
Vue.use(Vuex)

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      User,
      Eventbrite,
      Meetup
    }
  })

  return Store
}

从上面的代码段中，有人可以告诉我

以上代码段正确吗？如果没有，我该如何解决？
在redux中，我们曾经做过 ... state 来跟踪以前的状态，但是在这里我们直接改变状态，因此我们不需要做。 ..state ？（简而言之，我们是否需要在Vuex中创建状态副本。如果是，那么为什么？如果不是，那么为什么？如果它是主观的，那么如何决定？）

Answer 1

您的代码看起来正确。您是否要将商店添加到Vue实例中？如果您有任何错误，请提供更多详细信息。
在Vue中，您只需更改所需的状态即可。当您在data内创建变量时，Vue会在内部创建将处理每个变量上的操作的Getter和Setter。您可以通过在控制台中打印vue实例来查看getter和setter。

在Vuex中使变异和动作代码模块化

1 个答案: