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如何实现记事本功能”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。