learn vuex

vuex_demo2/src/App.vue

@@ -0,0 +1,99 @@
+<template>
+  <div id="app">
+    <a-input placeholder="请输入任务" class="my_ipt" :value="inputValue" @change="handleInputChange"/>
+    <a-button type="primary" @click="addItemToList">添加事项</a-button>
+
+    <a-list bordered :dataSource="infolist" class="dt_list">
+      <a-list-item slot="renderItem" slot-scope="item">
+        <!-- 复选框 -->
+        <a-checkbox :checked="item.done" @change="(e)=>(cbStatusChange(e,item.id))">{{ item.info }}</a-checkbox>
+        <!-- 删除链接 -->
+        <a slot="actions" @click="removeItemByID(item.id)">删除</a>
+      </a-list-item>
+
+      <!-- footer区域 -->
+      <div class="footer" slot="footer">
+        <span>{{unDoneLength}}条剩余</span>
+        <a-button-group>
+          <a-button :type="viewstatus==='all'?'primary':'default'" @click="changelist('all')">全部</a-button>
+          <a-button :type="viewstatus==='undone'?'primary':'default'"  @click="changelist('undone')">未完成</a-button>
+          <a-button :type="viewstatus==='done'?'primary':'default'"  @click="changelist('done')">已完成</a-button>
+        </a-button-group>
+        <a @click="clean">清除已完成</a>
+      </div>
+    </a-list>
+  </div>
+</template>
+
+<script>
+import {mapState,mapGetters} from 'vuex';
+export default {
+  name: "app",
+  data() {
+    return { };
+  },
+  created(){
+    this.$store.dispatch('getlist')
+  },
+  methods: {
+    handleInputChange(e){
+      // console.log(e.target.value)
+      this.$store.commit('setInputValue',e.target.value)
+    },
+    addItemToList(){
+      //trim()去除字符串头尾两边的空格
+      if(this.inputValue.trim().length <=0){
+        //弹出一个警告框
+        return this.$message.warning('文本框内容不能为空')
+      }
+      this.$store.commit('addItem')
+    },
+    removeItemByID(id){
+      // console.log(id)
+      this.$store.commit("removeItem",id)
+    },
+    cbStatusChange(e,id){
+      //监听复选框选中状态的变化
+      // console.log(e.target.checked,id)
+      const param = {
+        id:id,
+        done:e.target.checked
+      }
+      this.$store.commit('changeStatus',param)
+    },
+    //清除已完成的任务
+    clean(){
+      this.$store.commit('cleanDone')
+    },
+    //修改页面展示的列表数据
+    changelist(status){
+      // console.log(status)
+      this.$store.commit('changeviewstatus',status)
+    }
+  },
+  computed:{
+    ...mapState(['list','inputValue','viewstatus']),
+    ...mapGetters(['unDoneLength','infolist'])
+  }
+};
+</script>
+
+<style scoped>
+#app {
+  margin: 175px 450px;
+  padding: 10px;
+}
+.my_ipt {
+  width: 500px;
+  margin-right: 10px;
+}
+.dt_list {
+  width: 500px;
+  margin-top: 10px;
+}
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>

vuex_demo2/src/main.js

@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import App from './App.vue'
+import store from './store'
+//1、导入ant-design-vue 组件库
+import Antd from 'ant-design-vue'
+
+//2、导入组件库的样式表
+import 'ant-design-vue/dist/antd.css'
+
+Vue.config.productionTip = false
+
+Vue.use(Antd)
+
+new Vue({
+  store,
+  render: h => h(App)
+}).$mount('#app')

vuex_demo2/src/store/index.js

@@ -0,0 +1,90 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import axios from 'axios';
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    //所有的任务列表
+    list:[],
+    inputValue:'aaa',
+    nextID:5,
+    viewstatus:'all'
+  },
+  getters: {
+    //统计未完成条数的情况
+    unDoneLength(state){
+      return state.list.filter(v=>v.done === false).length
+    },
+    infolist(state){
+      if(state.viewstatus === 'all'){
+        return state.list
+      }
+      if(state.viewstatus === 'undone'){
+        return state.list.filter(v=>!v.done)
+      }
+      if(state.viewstatus === 'done'){
+        return state.list.filter(v=>v.done)
+      }
+      return state.list
+    }
+  },
+  mutations: {
+    initlist(state,list){
+      //接收到action中getlist函数传过来额参数后，对state中的list直接进行赋值操作
+      state.list = list
+    },
+    setInputValue(state,value){
+      //为store中的InputValue赋值
+      state.inputValue = value
+    },
+    addItem(state){
+      //添加列表项
+      const obj = {
+        id:state.nextID,
+        info:state.inputValue.trim(),
+        done:false
+      }
+      state.list.push(obj)
+      state.nextID++
+      state.inputValue = ''
+    },
+    removeItem(state,id){
+      //删除列表项
+      //根据id查找对应项的索引
+     const removeId =  state.list.findIndex(v=>v.id === id)
+     if(removeId !== -1){
+       state.list.splice(removeId,1)
+     }
+    },
+    changeStatus(state,param){
+      //修改列表项的选中状态
+      const updateId =  state.list.findIndex(v=>v.id === param.id)
+      if(updateId !== -1){
+        state.list[updateId].done = param.done
+      }
+    },
+    //清除已完成的任务
+    cleanDone(state){
+      state.list =  state.list.filter(v=>v.done === false)
+    },
+    //修改视图中的关键字
+    changeviewstatus(state,status){
+      state.viewstatus = status
+    }
+  },
+  actions: {
+    getlist(context){
+      //发送请求请求list.json中的数据
+      axios.get('/list.json')
+      .then(res=>{
+        console.log(res.data)
+        //调用imutation中的initlist函数，并将res.date传给它
+        context.commit('initlist',res.data)
+      })
+    }
+  },
+  modules: {
+  }
+})