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
}
]
结果图：
