vuex storeの配列にコンポーネントでpushする Cannot read property 'push' of undefined

Question

vue.js,vuexを用いてTodoアプリのようなものを作っています。
storeの配列に対して新しいitemをpushしたいです。methodはstoreには書かず、単一ファイルコンポーネントに記述しようとしています。
storeの配列をコンポーネントでmapState(['lists'])しているのですが、このように扱うとlistsはObject扱いになるらしく、配列に追加したい時にthis.$store.lists.pushとしてもCannot read property 'push' of undefinedというエラーになります。
どうすればよいでしょうか？

mutations.js

export const state = {
  lists:[
    {title:'あ',
     date:'2018/1/10',
     start:'8時',
     finish:'17時',
    },
    {title:'い',
     date:'2018/1/15',
     start:'9時',
     finish:'16時',
    },
  ]
}

addPlan.vue

<template>略</template>
<script>
import Vue from 'vue'
import { mapState } from 'vuex'

export default{
    name: 'add',

    computed:mapState(['lists']),

    methods:{
      addPlan:function(newT,newD,newS,newF){
        this.$store.lists.push({
          title: newC,
          date: newD,
          start: newS,
          finish: newF
        });
      }
    }
</script>

いろいろ省略していますが、コードはこんな感じです。

Answer 1

解決策は２つあります。

mapStateを使っているので、this.$storeを書く必要がないパターン

      addPlan:function(newT,newD,newS,newF){
        this.lists.push({
          title: newC,
          date: newD,
          start: newS,
          finish: newF
        });
      }

もう一つはstateにアクセスする文法を間違えているので、正しい文法にするパターン

      addPlan:function(newT,newD,newS,newF){
        this.$store.state.lists.push({
          title: newC,
          date: newD,
          start: newS,
          finish: newF
        });
      }

Comments

[syoyu]

書き方が間違っていただけだったんですね。ご丁寧にありがとうございました。