title: What is the best way to clear the properties of an object in Vuex state
body: <p>Suppose you have this object in the <code>state</code> of the Vuex store:</p>
  
  <pre class="lang-js prettyprint-override"><code>const state = {
    profile: {
     name: "Bob",
     jobTitle: 'Baker',
     age: 38,
    }
  }
  </code></pre>
  
  <p>In the Vue.js template you can access this object with a <code>computed</code> property like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;p&gt;Welcome {{ profile.name }}&lt;/p&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>This works fine but requires the properties to be defined upfront. And when there is no logged on user each property of <code>profile</code> needs to be set to an empty string. Because when we set <code>state.profile = null</code> the Vue template will complain that it can't find the property <code>name</code> anymore.</p>
  
  <p>What is the best way to handle a case like this? Would we need to <a href="https://stackoverflow.com/questions/684575/how-to-quickly-clear-a-javascript-object">iterate the object properties</a> and set them all to a blank string or is there a better way of handling this?</p>
  
  <p>Thank you for your help.</p>