title: Vue filter and the "Do not mutate vuex store state outside mutation handlers"
body: <p>I'm still learning Vue and I can't understand why this error occurs.</p>
  
  <blockquote>
    <p>Error: [vuex] Do not mutate vuex store state outside mutation handlers.</p>
  </blockquote>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const DATE_FORMAT = "DD-MM-YYYY";
  
  Vue.filter("formatDate", function(value, dateFormat) {
    dateFormat = dateFormat ? dateFormat : DATE_FORMAT;
    if (value) {
      return moment(String(value)).format(dateFormat);
    }
  });
  
  Vue.component('list-component', {
    props: ['projects'],
    template: 
  `
  &lt;div&gt;
    &lt;ul v-for="project in projects" :key="project.id"&gt;
      &lt;li v-for="(value, key) in project" :key="key"&gt;
        {{ key }}: {{ value }}
      &lt;/li&gt;
      &lt;hr /&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  `
  });
  
  const store = new Vuex.Store({
    state: {
      projects: [{
        id: 1,
        name: "super project",
        startDate: "2014-09-01T08:18:28+02:00"
      }, {
        id: 2,
        name: "extra project",
        startDate: "2017-12-20T07:28:23.133+01:00"
      }, {
        id: 3,
        name: "small project",
        startDate: "2017-12-20T07:28:23.133+01:00"
      }]
    },
    getters: {
      allProjects: state =&gt; state.projects
    },
    strict: true
  });
  
  new Vue({
    el: '#app',
    computed: {
      formattedProjects() {
        var project = store.getters.allProjects;
        project.forEach(project =&gt; {
          project.startDate = this.$options.filters.formatDate(project.startDate);
        });
        return project;
      }
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/vue@2.5.13/dist/vue.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;
    &lt;list-component :projects="formattedProjects"&gt;&lt;/list-component&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/9sn78n1h/2/" rel="nofollow noreferrer">https://jsfiddle.net/9sn78n1h/2/</a></p>
  
  <p>I can't use my filter in the component, because the property name can be different. In the example above it's <code>startDate</code>, but in other data it could be <code>addDate</code>, <code>endDate</code> etc.
  In the vuex store I need the <code>startDate</code> in the format as it is, I don't want to mutate it.
  I'm not sure that writing another getter in the vuex like <code>allProjectsWithFormatedDate</code> is a good practice, but even so, it still yells about the mutating store.</p>
  
  <p>So I create a local variable <code>project</code> in my computed method <code>formattedProjects()</code> and I don't know why I've got this error after changing it's value.</p>
  
  <p>Can somebody help me to understand it and show the correct way to solve this problem?</p>
  
  <p>I know I can set the <code>strict</code> mode to <code>false</code> to mute this error (and I should in production), but I belive there is a better way to solve this.</p>