vuex做的todolist

1.首先下载vue脚手架

  vue init webpack 项目名  

• 注：路由选yes,其他都是no,否则会报错，打不开，要是都选yes了，就打开项目中的build文件下的webpack.base.conf.js==》第43行 // ...(config.dev.useEslint ? [createLintingRule()] : []),将这行代码注销了，也可以

2.在components下新建两个aa.vue、bb.vue文件

• aa.vue

<template>
    <div>
        <input type="text" placeholder="请输入内容" v-model="Inp"
    @keydown.enter="aa"> 
        <Abb></Abb>
    </div>
</template>
<script>
import Abb from "../components/bb";//引入bb.vue文件
export default{
    components:{Abb},//注册bb.vue组件
    name:'Acd',
    data(){
        return{
            Inp:' ',
        }
    },
    methods:{
        aa(){//回车事件
             this.$store.commit('Inp',this.Inp);//将当前input的输入的值，传递到vuex中
            this.Inp='';
        }
    }
}


</script>
<style>




</style>

• bb.vue

import { mapState, mapGetters } from 'vuex';
<template>

    <div>
        <p>未完成{{list.length-this.$store.getters.sun}}</p>
        <ul>
            <li v-for="(item,index) in list" :key='index' v-show="!item.done">
                <input type="checkbox" v-model="item.done">
                <span>{{item.name}}</span>
                <span @click="del(index)">删除</span>
            </li>
        </ul>
        <p>已完成{{this.$store.getters.sun}}</p>
        <ul>
            <li v-for="(item,index) in list" :key='index' v-show="item.done">
                <input type="checkbox"  v-model="item.done">
                <span>{{item.name}}</span>
                <span @click="del(index)">删除</span>
            </li>
        </ul>

    </div>

</template>
<script>
import {mapState, mapGetters} from 'vuex';//vuex中自带的方法可以实时更新数据
    export default{
        name:'Abb',
        data(){
            return{
                // list:JSON.parse(localStorage.getItem('todo'))||[]
            }
        },
        methods:{
            del(k){
                this.$store.commit('del',k);//将当前的下标传递到仓库中
            }
        },
        computed:{
            ...mapState({//实时更新vuex中list的数据
                list:"list"
            })
        }
    }


</script>
<style>

</style>

3.在APP.vue中将脚手架自带的样式和图片删除

4.在router文件夹下的index.js文件中，将首页路由修改一下

import Vue from 'vue'
import Router from 'vue-router'
import Acd from '@/components/aa';//将helloword替换成aa.vue文件


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'acd',
      component: Acd//上方的Acd
    }
  ]
})

5.下载vuex

 cnpm install vuex -s

6. 配置vuex

• 在src文件中新建一个文件store，在store文件下新建一个index.js文件

  import Vue from 'vue';

  import vuex from 'vuex';
  Vue.use(vuex);
  var store = new vuex.Store({
    state:{
        list:JSON.parse(localStorage.getItem('todo'))||[]
    },
    mutations:{
        Inp(state,v){
            var obj = {name:v,done:false};
            state.list.push(obj);
            localStorage.setItem('todo',JSON.stringify(state.list));
        },
        del(state,k){
            state.list.splice(k,1);
        }
    },
    getters:{
        sun(state){
            var s=0;
            for(var i=0;i<state.list.length;i++){
                if(state.list[i].done){
                    s++;
                }
            }
            return s;
        }
    }
  })
  export default store;

7.在main.js中引入一下store

  // The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router';
import store from './store';//---->这里

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,//----->这里
  components: { App },
  template: '<App/>'
})

8.此时可以运行项目

//进入当前项目
npm run dev

9.效果图

todolist.png

• 没怎么写样式，见谅！！！