本文主要是介绍vue2中用到了 vuex 实现一个 留言板效果,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
一.效果图展示:
二.静态网页(html)代码
<template><div><h1>班级留言板</h1><ol><li v-for="(msg, index) in classmsgs" :key="index">{{ msg }} <a href="#" @click.prevent="delmsg(index)">删除</a></li></ol><textarea name="" id="" cols="35" rows="5" v-model="addclassmsg" @keyup="inputchange"></textarea><button @click="sub">提交</button></div>
</template>
这是一个使用Vue.js框架编写的班级留言板组件。以下是代码的详细解释:
- template标签内包含了整个组件的HTML结构。
- div是根元素,包含了一个标题(h1)和一个有序列表(ol)。
- 在有序列表中,使用了v-for指令来遍历名为classmsgs的数组,该数组存储了班级留言信息。每个留言都是一个列表项(li),其中包含留言内容和一个删除按钮(a)。
- **:key=“index”**为每个列表项分配一个唯一的键,以便Vue可以跟踪它们的变化。
- @click.prevent="delmsg(index)"是一个事件监听器,当点击删除按钮时,会调用名为delmsg的方法并传递当前索引作为参数。
- textarea元素用于输入新的留言内容,它与名为addclassmsg的数据属性绑定,这意味着它的值将随着数据属性的变化而变化。
- @keyup="inputchange " 是一个事件监听器,当在文本区域中按键时,会调用名为inputchange的方法。
<button @click=“sub”>提交是一个按钮,当点击时,会调用名为sub的方法来提交新的留言。
注意:这段代码仅展示了Vue组件的模板部分,实际使用时还需要添加对应的JavaScript代码来实现delmsg、inputchange和sub方法以及定义classmsgs和addclassmsg数据属性。
三.javascript代码
import { mapState, mapActions } from 'vuex';
export default{data(){return{addclassmsg:""}},computed: {// 简化取state,getters...mapState({addclassmsgx:state =>state.addclassmsgx,classmsgs:state => state.classmsgs}),},methods: {// 简化取action,mutation,建立一个对应关系...mapActions({increment: 'increment',decrement: 'decrement',tijiao:'tijiao'}),inputchange(){this.$store.dispatch("savecalssmsg",this.addclassmsg)},sub(){console.log(this.addclassmsg)this.$store.dispatch("addclassmsg")this.addclassmsg = ''},delmsg(){// this.classmsgs.splic(index,1)this.$store.dispatch("delmsg")}},
}
这段代码是一个Vue组件,使用了Vuex进行状态管理。具体解释如下:
-
导入了mapState, mapGetters, mapActions这三个辅助函数,用于简化在组件中访问Vuex的状态、getter和action。
-
定义了一个名为addclassmsg的数据属性用来存储textarea标签中的值,初始值为空字符串。
-
使用computed属性来简化访问Vuex的state和getter。这里定义了两个计算属性:addclassmsgx和classmsgs,分别对应Vuex中的state.addclassmsgx和state.classmsgs。
-
在methods中,使用mapActions简化了访问Vuex的action。这里定义了三个方法:increment、decrement和tijiao,分别对应Vuex中的actions.increment、actions.decrement和actions.tijiao。
-
定义了一个名为inputchange的方法,用于将addclassmsg的值通过savecalssmsg这个mutation保存到Vuex的state中。
-
定义了一个名为sub的方法,用于提交表单。首先打印addclassmsg的值,然后通过调用addclassmsg这个action将其添加到Vuex的state中,最后清空addclassmsg的值。
-
定义了一个名为delmsg的方法,用于删除消息。通过调用delmsg这个action来实现删除操作。
四.vuex知识部分:index.js对应的代码
import Vuex from 'vuex';
import Vue from 'vue'
Vue.use(Vuex)let store =new Vuex.Store({state: {addclassmsgx:'',classmsgs:['好好学习','天天向上','力争上游']},mutations: {saveclass(state,data){console.log('mu')state.addmsgx=data},saveclasstask(state){state.classmsgs.push(state.addmsgx)},xdelmsg(state){let index = state.classmsgs.indexOf()state.classmsgs.splice(index,1)}},actions: {increment(context) {//其他操作(如异步操作等)// 修改数据的唯一方法,是提交mutation.// 的页面的话,先调用action,action再提交mutation.context.commit('increment');},decrement(context) {context.commit('decrement');},savecalssmsg(context,data){console.log('action')context.commit('saveclass',data);},addclassmsg(context){context.commit('saveclasstask')},delmsg(context,data){context.commit('xdelmsg',data)}}})
export default store;
这段代码是使用Vue.js和Vuex创建的一个状态管理库。Vuex是一个专门为Vue.js应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
-
state:定义了应用的状态树,这里有两个状态属性:addclassmsgx 和 classmsgs。addclassmsgx 用于存储添加的班级信息,classmsgs 是一个数组,用于存储班级任务列表。
-
mutations:定义了改变状态的方法。每个方法接收两个参数:state 和 payload。state 是当前的状态对象,payload 是调用该 mutation 时传递的数据。这里有四个 mutation:
- saveclass:将传入的数据保存到 addclassmsgx 中。
- saveclasstask:将 addclassmsgx 的内容添加到 classmsgs 数组中。
- xdelmsg:删除 classmsgs 数组中的指定元素。注意,这里的代码有一个错误,indexOf() 函数缺少参数,应该是 indexOf(data)。
-
actions:定义了异步操作,可以提交多个 mutation。每个 action 接收一个 context 对象,通过 context.commit() 方法提交 mutation。这里有五个 action:
- increment 和 decrement:这两个 action 没有实际作用,是示例代码的一部分。
- savecalssmsg:接收数据并将其传递给 saveclass mutation。
- addclassmsg:提交 saveclasstask mutation,将 addclassmsgx 的内容添加到 classmsgs 数组中。
- delmsg:接收数据并将其传递给 xdelmsg mutation,删除 classmsgs 数组中的指定元素。
-
new Vuex.Store():创建一个 Vuex store 实例,并将上述定义的对象作为参数传入。这样,我们就可以在整个应用程序中使用这个 store 来管理状态。
这篇关于vue2中用到了 vuex 实现一个 留言板效果的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!