Vuex如何實現記事本功能

這篇文章主要介紹了Vuex如何實現記事本功能的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vuex如何實現記事本功能文章都會有所收獲，下面我們一起來看看吧。

首先：執行命令 安裝Vuex

npm install vuex@next --save

在mian.js 中掛在vuex

import store from './store'
 
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

這里使用的 Ant Design UI ：

npm install ant-design-vue --save

在 main.js 中完整引入

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)

App.vue中

<template>
  <div id="app">
    <div>
      <a-input placeholder="請輸入任務" class="my_ipt" :value='inputVal'
      @change="handleInputChange"
      />
      <a-button type="primary" @click="addItem">添加事項</a-button>
 
      <a-list bordered :dataSource="infoList" class="dt_list">
        <a-list-item slot="renderItem" slot-scope="item">
          <!-- 復選框 -->
          <a-checkbox :checked='item.done' @change="changeItem(item.id,$event.target.checked)">{{ item.info }}</a-checkbox>
          <!-- 刪除鏈接 -->
          <a slot="actions" @click="deleteItemById(item.id)">刪除</a>
        </a-list-item>
 
        <!-- footer區域 -->
        <div class="footer" slot="footer">
          <span>{{unDoneNub}}條未完成</span>
          <a-button-group>
            <a-button :type="ViewType=='all'?'primary':''" @click="changeList('all')">全部</a-button>
            <a-button :type="ViewType=='undone'?'primary':''" @click="changeList('undone')">未完成</a-button>
            <a-button :type="ViewType=='done'?'primary':''" @click="changeList('done')">已完成</a-button>
          </a-button-group>
          <a @click="deleteDone">清除已完成</a>
        </div>
      </a-list>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'app',
  data () {
    return {
      // 模擬數據
      // list: []
    }
  },
  computed: {
    ...mapState(['list', 'inputVal', 'ViewType']),
    ...mapGetters(['unDoneNub', 'infoList'])
  },
  created () {
    this.$store.dispatch('getList')
  },
  methods: {
    handleInputChange (e) {
      console.log(e.target.value)
      // 拿到輸入框的值  保存到vuex中
      this.$store.commit('setInputVal', e.target.value)
    },
    // 向列表中添加事項
    addItem () {
      if (this.inputVal.trim().length <= 0) {
        return alert('文本框不能為空')
      }
      // 向store中調用函數  來修改數據  不可以直接修改
      this.$store.commit('addItem')
    },
 
    // 刪除
    deleteItemById (id) {
      // console.log(id);
      this.$store.commit('deleteItem', id)
    },
 
    // 改變狀態
    changeItem (id, e) {
      console.log(id, e)
      // 通過id改變狀態
      this.$store.commit('changeItem', id)
    },
 
    // 清除已完成
    deleteDone () {
      this.$store.commit('deleteDone')
    },
 
    changeList (type) {
      this.$store.commit('changeList', type)
    }
 
  }
}
</script>
<style scoped>
#app {
  padding: 10px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.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>

store index.js 中

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  state: {
    list: [],
    inputVal: '',
    id: 10,
    ViewType: 'all'
  },
  // 真正操作數據的地方
  mutations: {
    INITLIST (state, data) {
      state.list = data
    },
    setInputVal (state, data) {
      state.inputVal = data
    },
    addItem (state) {
      const obj = {
        id: state.id,
        info: state.inputVal.trim(),
        done: false
      }
      state.list.push(obj)
      state.id++
      state.inputVal = ''
    },
    // 刪除已完成
    deleteDone (state) {
      state.list = state.list.filter(item => {
        return item.done != true
      })
    },
    deleteItem (state, id) {
      state.list = state.list.filter(item => {
        // console.log(item.id);
        return item.id != id
      })
    },
    // 改狀態
    changeItem (state, id) {
      // 對應id的done值取反 先拿索引 根據索引 取反對應的狀態  如果有多重狀態 則需要參數傳遞
      const index = state.list.findIndex(item => {
        return item.id === id
      })
      if (index !== -1) {
        state.list[index].done = !state.list[index].done
      }
    },
    // 改變列表
    changeList (state, type) {
      state.ViewType = type
      state
    }
  },
  actions: {
    //模仿發送請求
    getList (content) {
      axios.get('./list.json').then(res => {
        console.log(res.data)
        content.commit('INITLIST', res.data)
      })
    }
 
  },
  modules: {
  },
  getters: {
    // 未完成的數量
    unDoneNub (state) {
      return (state.list.filter(item => {
        return item.done == false
      })).length
    },
    // 根據列表類型 過濾不同的展示列表
    infoList (state) {
      if (state.ViewType == 'all') {
        return state.list
      }
      if (state.ViewType == 'undone') {
        return state.list.filter(item => !item.done)
      }
      if (state.ViewType == 'done') {
        return state.list.filter(item => item.done)
      }
    }
  }
})

list.json

[
    {
        "id": 0,
        "info": "打籃球",
        "done": false
    },
    {
        "id": 1,
        "info": "打王者榮耀",
        "done": true
    },
    {
        "id": 2,
        "info": "學習",
        "done": false
    },
    {
        "id": 3,
        "info": "吃飯",
        "done": false
    },
    {
        "id": 4,
        "info": "睡覺",
        "done": false
    }
]

結果圖：

關于“Vuex如何實現記事本功能”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Vuex如何實現記事本功能”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。