vuex的简单todolist例子

一个简单的vuex应用的小例子，一段自己的学习记录。
todolist就是一个简单的输入框，一个按钮，一个文本显示区域，可以逐条进行删除。

1.在用vue-cli生成好的HelloWorld.vue文件中直接写代码，先删除所有的自带代码

<template>
  <div class="hello">
    <input type="text">
    <button>增加事项</button>
    <ul>
      <li>item</li>
    </ul>
  </div>
</template>

要把`input`中的值在经过`button`点击后，显示在`li`中，`input`有`v-model`属性进行值的绑定，
让`li`的数据是一个数组。相当于在数组中push input的值。

2.在src目录下，新建一个store文件夹，创建一个index.js文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    inputVal: 'lily',
    list: ['1', '2', '3']
  },
  mutations: {
    changeListValue(state, inputVal) {
      state.list.push(inputVal)
      state.inputVal = ''
    },
    handleDel(state, idx) {
      state.list.splice(idx, 1)
    }
  },
  actions: {
    changeListValue: ({commit}, inputVal) => {
      return commit('changeListValue', inputVal)
    },
    handleDel: ({commit}, idx) => {
      return commit('handleDel', idx)
    }
  }
})
export default store

3.回到HelloWorld.vue

<template>
  <div class="hello">
    <input v-model="$store.state.inputVal" type="text">
    <button @click="changeListValue(inputVal)">增加事项</button>
    <ul v-for="(item, idx) in list">
      <li @click="handleDel(idx)">{{item}}</li>
    </ul>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'
  export default {
    name: 'HelloWorld',
    computed: {
      ...mapState(['list', 'inputVal'])
    },
    methods: {
      ...mapActions(['changeListValue', 'handleDel'])
    }
  }
</script>

4.input中的 v-model 属性在属于 Vuex 的 state 上使用会有些问题，因为当用户在input中输入时，v-model会直接修改store中的状态，但是，想要更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，所以，应该使用带有 setter 的双向绑定计算属性，具体修改如下

 <input v-model="inputVal" type="text">
 
 <script>
     computed: {
        // 在计算属性中添加如下
        inputVal: {
          get() {
            return this.$store.state.inputVal;
          },
          set(newVal) {
            this.$store.commit("SETVAL", newVal);
          }
        }
      }
 </script>
 
 // 在store.js中的mutations添加
 
    SETVAL(state, payload) {
      state.inputVal = payload
    }