vue2中用到了 vuex 实现一个留言板效果

本文主要是介绍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 来管理状态。