Vuex创建State时如何使用函数？遇Getter未就绪问题求助

The Problem #

I tried initializing part of my Vuex state using a getter, but the code throws an error (likely because the getter isn't ready when the state is being set). Here's my code:

export const store = new Vuex.Store({
  state : {
    a : 1,
    b : getters.multiply(a)
  },
  getters : {
    multiply : (state) => (param) => return param * 2
  },
})

I know Vuex's state can accept a function to create data, but I couldn't find examples of how to do this properly. I'm wondering if I need to use a function call or props to fully initialize the state, and I'd appreciate any help.

The Explanation #

You're spot-on about the root issue: when the Vuex Store is being instantiated, the getters object hasn't been fully set up yet. Trying to reference getters.multiply directly in the state definition will fail because getters doesn't exist in that scope at that point. Additionally, the a you're passing to multiply isn't referencing the state's a property—it's looking for a global variable named a, which probably doesn't exist.

Solutions #

1. Use a Factory Function for State (Reusable Logic) #

Vuex allows state to be a function instead of an object. This lets you compute values upfront, and you can extract the shared calculation logic to avoid repeating code between state and getters:

// Extract the multiply logic to reuse it everywhere
const multiply = (param) => param * 2

export const store = new Vuex.Store({
  state: () => {
    const a = 1
    return {
      a,
      b: multiply(a) // Calculate b directly here
    }
  },
  getters: {
    // Reuse the same multiply function in the getter
    multiply: (state) => (param) => multiply(param)
  }
})

2. Initialize via Mutation After Store Creation #

If b depends on other state properties or you absolutely need to use the getter's logic, you can initialize b to a placeholder value first, then use a mutation to set it after the store is created:

export const store = new Vuex.Store({
  state : {
    a : 1,
    b : null // Temporary placeholder
  },
  getters : {
    multiply : (state) => (param) => param * 2
  },
  mutations: {
    setB(state) {
      // Now getters are ready, so we can use them here
      state.b = this.getters.multiply(state.a)
    }
  }
})

// Trigger the mutation right after creating the store
store.commit('setB')

3. Turn b into a Getter (Best for Derived State) #

If b is just a derived value of a (meaning it doesn't need to be modified independently), you don't need to store it in state at all. Just create a getter for b that uses your existing multiply getter:

export const store = new Vuex.Store({
  state : {
    a : 1
  },
  getters : {
    multiply : (state) => (param) => param * 2,
    // Derive b directly from state and the multiply getter
    b: (state, getters) => getters.multiply(state.a)
  }
})

Now you can access b in your components with this.$store.getters.b—it will always stay in sync with a, and you don't have to worry about initializing it manually.

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