Vuex实现记事本功能 Vuex实现记事本功能

本文实例为大家分享了Vuex实现记事本功能的具体代码，供大家参考，具体内容如下
首先：执行命令安装Vuex

npm install vuex@next --save

【Vuex实现记事本功能】在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中

#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; }

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 = typestate}},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}]

结果图：