这篇文章主要介绍了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如何实现记事本功能”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。
