一、关于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页面)
上代码:
Document
CompA可以通过id搜索:
CompB
id:
text:
id:
text:
搜索结果:
{{item1}}
CompC所有数据:
- {{item}}
缺点:没有显示总行数
方法二:创建一个vue项目来写
创建Vue项目:
vue create todoList
创建对应包/文件
数据总行数:{{ dataList.length }}
-
{{ data.name }},{{ data.age }}岁
//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项目来写
下面是代码:
ComA
//CompB
ComB
-
姓名:{{ student.name }} 学号:{{ student.id }}
数据总行数:{{ totalRows }}
//CompC
CompC
npm
-
{{ student.name }} {{ student.id }}
//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')
以上有四个例子,如果 如果你觉得这篇帖子对你有帮助,请留下你的点赞和关注!!