vuex写todolist

todolistt.png

===Box代码

<template>
  <div>
    <h4>todolist</h4>
    <todoinput></todoinput>
    <todolist></todolist>
    <todotab></todotab>

  </div>
</template>
<script>
import todoinput from './todo-input'
import todotab from './todo-tab'
import todolist from './todo-list'
export default {
  components:{todoinput,todotab,todolist}
}
</script>

===todoinput代码

<template>
  <div>
    <input 
    v-model="inputValue"
    type="text" placeholder="请输入待办事项">
 <button @click="add">add</button>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
  data(){
    return{
      inputValue:''
    }
  },
  methods:{
    ...mapMutations(['todolist/addList']),
    add(){
   this['todolist/addList']({msg:this.inputValue})
      
   
    }
  }
}
</script>

===todolist代码

<template>
  <div>
    <ul>
      <li
        :class="item.finish ? 'green' : 'red'"
        v-for="(item, index) in list"
        :key="index"
      >
        {{ item.msg }}
        <button @click="del(index)">删除</button>
        <span v-if="item.finish">已完成</span>
        <button v-else @click="update(index)">完成</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState,mapMutations } from "vuex";
export default {
  //我们可以通过Vue的Computed获得Vuex的state
  computed: {
    ...mapState({ list: state => state.todolist.list }),
  },
  methods:{
    ...mapMutations(['todolist/delList','todolist/updateList']),
    del(index){
      this['todolist/delList']({index})
    },
    update(index){
      this['todolist/updateList']({index})
    }
  },
  mounted() {
    console.log(this);
  },
};
</script>
<style>
.red {
  background: red;
}
.green {
  background: green;
}
</style>

===todotab代码

<template>
  <div>
   <span>全部</span>
   <span>已完成</span>
   <span>未完成</span>

  </div>
</template>

===todolistStore.js代码

export default {
  namespaced:true,
  state:{
    list:[{msg:'明天周天干啥',finish:true},
      {msg:'呵呵哒',finish:false},
      {msg:'giao',finish:true}
    ]
  },

  getters:{},
  mutations:{
    addList(state,params){
      state.list.push({msg:params.msg,finish:false})
    },
    delList(state,params){
      state.list.splice(params.index,1)
    },
    updateList(state,params){
        state.list[params.index].finish=true
    }
  },
  actions:{}
}

===index.js代码

//创建全局状态管理实例
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import todolist from './todolistStore'
let store = new Vuex.Store({
 modules:{
   todolist:todolist
 }


})


export default store