关于Vue之Vuex的案例展示----增删改查案例

 一、关于vuex的教程视频不是很多，我学起来也很头疼，但是仔细看官方文档也是能看得懂，如果有同学想看，地址给你Vuex的官方文档

二、看看实例更方便我们掌握Vuex的用法

1.github:https://github.com/s3-2909/vuex_TodoList.git（直接下载压缩包然后安装yarn依赖就能跑起来啦！！这个使用了UI框架，也是能看懂，并且哔哩哔哩有视频也能跟着敲一遍）

看图片效果： 

---

2. 三个组件：CompA，CompB和CompC，另在Vuex对象中定义数据列表（如学生信息的数据列表），在CompA中定义添加数据的功能，在CompB中定义删除数据并显示数据总行数的功能，在CompC中定义显示数据列表详情的功能。用Vue及Vuex完成以上功能。

方法一：采用引用CDN的方式（传统的html页面）

看效果：

上代码： 

    
    
    
    
    
    
    




    CompA可以通过id搜索：
    
    搜索
    添加
    

        CompB
        id：
        text：
        
        
    
    

        id：
        text：
        
        
    
    
搜索结果：
    
    
CompC所有数据：
    

        
{{item}}
            修改
            删除
        
    

缺点：没有显示总行数

方法二：创建一个vue项目来写

看效果：

创建Vue项目： 

vue create todoList

创建对应包/文件

//index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    dataList: [] // 数据列表
  },
  mutations: {
    // 添加数据
    addData(state, data) {
      state.dataList.push(data)
    },
    // 删除数据
    deleteData(state, index) {
      state.dataList.splice(index, 1)
    }
  },
  actions: {
    // 添加数据
    addData({ commit }, data) {
      commit('addData', data)
    },
    // 删除数据
    deleteData({ commit }, index) {
      commit('deleteData', index)
    }
  }
})
export default store

//App.vue

//main.js
import Vue from 'vue'
import App from './App.vue'

import store from './store'

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

 

 方法三：也是创建一个vue项目来写

看效果图

请对应建包： 

下面是代码：

//CompB

//CompC

//index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    students: []
  },
  getters: {
    allStudents: state => state.students,
    // 获取数据总行数
    counts(state) {
      return state.students.length
    }
  },
  mutations: {
    // 添加数据
    addData(state, studentData) {
      state.students.push(studentData)
    },
    // 删除数据
    deleteStudent(state, studentId) {
      const index = state.students.findIndex(s => s.id === studentId)
      if (index !== -1) {
        state.students.splice(index, 1)
      }
    }
  },
  actions: {
    deleteStudent({ commit }, studentId) {
      commit('deleteStudent', studentId)
    }
  },
  modules: {
  }
})

//mian.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

---

以上有四个例子，如果 如果你觉得这篇帖子对你有帮助，请留下你的点赞和关注！！