title: Using a Map inside of Vuex state
body: <p>I'm building a prototype module to learn about <strong>Vuex</strong> and running into what seems like a simple issue -- I'm having trouble using a <code>Map</code> as one of my state variables. </p>
  
  <p>I want to use <strong>Vuex</strong> to store some basic user preferences across multiple modules and figured a <code>Map</code> would be a simple way to do it since the prefs could be handled as simple key/value pairs. But I'm either not defining the <code>Map</code> correctly, or I'm not using it correctly within the mutations.</p>
  
  <pre><code>&lt;script lang="ts"&gt;
  import Vue from 'vue';
  import Vuex from 'vuex';
  Vue.use(Vuex);
  
  export default new Vuex.Store({
    state: {
      userSettings: Map,
    },
    mutations: {
      addUserSetting(state, payload) {
        if (state.userSettings == null) {
          state.userSettings = new Map();
        }
        state.userSettings.set(payload.key, payload.value);
      }
  
    },
  
  })
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I'd be willing to use another object, and I started with an array of <code>UserPref</code> objects but that didn't go well, either.</p>