title: vuex- state returned as function or object literal
body: <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>