Vuex實現記事本功能

更新時間：2022年05月22日 08:37:03 作者：￡白晝の星☆

這篇文章主要為大家詳細介紹了Vuex實現記事本功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vuex實現記事本功能的具體代碼，供大家參考，具體內容如下

首先：執(zhí)行命令安裝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區(qū)域 -->
? ? ? ? <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)
? ? },
?
? ? // 改變狀態(tài)
? ? changeItem (id, e) {
? ? ? console.log(id, e)
? ? ? // 通過id改變狀態(tài)
? ? ? 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
? ? ? })
? ? },
? ? // 改狀態(tài)
? ? changeItem (state, id) {
? ? ? // 對應id的done值取反 先拿索引 根據索引 取反對應的狀態(tài) ?如果有多重狀態(tài) 則需要參數傳遞
? ? ? 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: {
? ? //模仿發(fā)送請求
? ? 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
? ? }
]

結果圖：