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中

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
    }
]

结果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。