<!DOCTYPE html>
<html lang="en">
 <head>
 </head>
 <body translate="no">
  <div id="app">
   <section class="section">
    <div class="content">
     <h1 class="title">
      Vuex Reactivity Caveats
     </h1>
     <p class="content">
      Vuex shares the same reactivity caveats regarding property addition as Vue.  This CodePen shows how to use
      <code>
       Vue.set
      </code>
      to add a reactive property to a Vuex store.  It also presents two failed attempts that I've seen while helping on the Vue Land Discord.
     </p>
     <p class="content">
      To test the code, select one of the following radio buttons.  Each selection triggers different versions of the ADD_PROPERTY mutation.
     </p>
     <div class="control content">
      <label class="radio" for="vueSet">
       <input id="vueSet" type="radio" v-model="demoSelection" value="vueSet"/>
       Use Vue.set
      </label>
      <label class="radio" for="directAssignment">
       <input id="directAssignment" type="radio" v-model="demoSelection" value="directAssignment"/>
       Direct assignment
      </label>
      <label class="radio" for="replaceItem">
       <input id="replaceItem" type="radio" v-model="demoSelection" value="replaceItem"/>
       Replace array item
      </label>
     </div>
     <p class="content">
      Only the selection for "Use Vue.set" will allow the property to be added reactively.  This means that when you press the Add Property button after making a selection, you'll see the UI update immediately.  The other selections won't show the new property or it will only show up later after additional selections are made.
     </p>
     <hr/>
     <div class="card">
      <div class="card-header">
       <p class="card-header-title">
        Demonstrating
        <span v-if="demoSelection == 'vueSet'">
         Vue.set
        </span>
        <span class="has-text-danger" v-else-if="demoSelection == 'directAssignment'">
         Direct Assignment (Won't Work)
        </span>
        <span class="has-text-danger" v-else="">
         Replace Array Item (Won't Work)
        </span>
       </p>
      </div>
      <div class="card-content">
       <div class="content">
        <p>
         Press the Select buttons to navigate through different items.  Press De-Select to clear the selection.
        </p>
        <button :key="item.id" @click="makeSelection(item.id)" class="button" v-for="item in $store.state.items">
         Select Item #{{ item.id }}
        </button>
        <button @click="makeSelection(-1)" class="button">
         De-Select Item
        </button>
       </div>
       <h2>
        Item Selected
       </h2>
       <p v-if="!$store.getters.selectedItem">
        No Item Selected
       </p>
       <div v-else="">
        <p>
         {{ $store.getters.selectedItem.id }}
        </p>
        <p v-if="$store.getters.selectedItem.obj">
         Property obj: {{ $store.getters.selectedItem.obj }}
        </p>
        <div v-else="">
         <p>
          Property Not Added
         </p>
         <button @click="addProperty" class="button is-primary">
          Add An Object Property
         </button>
        </div>
       </div>
      </div>
     </div>
    </div>
   </section>
  </div>
  <section class="section">
   <footer class="footer">
    References:
    <a href="https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats">
     Vue Docs
    </a>
    and
    <a href="https://vuex.vuejs.org/guide/mutations.html">
     Vuex Docs
    </a>
   </footer>
  </section>
 </body>
</html>
