vuex- state returned as function or object literal : <p>I ran into a problem the other day, and asked the great stack community for a solution. </p>

<h3>The problem:</h3>

<p>I nested the same module in other modules but I was defining state in this way:</p>

<pre><code>state: {
  // some state here
}
</code></pre>

<p>What was happening is all of my modules despite seeming being nested under disparate modules all shared the same state.</p>

<h3>The solution</h3>

<pre><code>state() {
  return {
    // state here instead
  }
}
</code></pre>

<p>The solution is to have a function return state rather than define it as an object literal. The why somewhat makes sense. Here are my questions</p>

<h3>New questions</h3>

<ol>
<li><p>What is happening under the hood of the store when state is defined as an object literal versus a function returning an object literal?</p></li>
<li><p>Why would you ever not use the function version? It seems like easily the default choice, but even in <a href="https://vuex.vuejs.org/en/modules.html" rel="noreferrer">vuex docs for <code>modules</code></a>, they opt to show state as an object literal.</p></li>
</ol>
