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框架编写的班级留言板组件。以下是代码的详细解释：

1. template标签内包含了整个组件的HTML结构。
2. div是根元素，包含了一个标题（h1）和一个有序列表（ol）。
3. 在有序列表中，使用了v-for指令来遍历名为classmsgs的数组，该数组存储了班级留言信息。每个留言都是一个列表项（li），其中包含留言内容和一个删除按钮（a）。
4. **:key=“index”**为每个列表项分配一个唯一的键，以便Vue可以跟踪它们的变化。
5. @click.prevent="delmsg(index)"是一个事件监听器，当点击删除按钮时，会调用名为delmsg的方法并传递当前索引作为参数。
6. textarea元素用于输入新的留言内容，它与名为addclassmsg的数据属性绑定，这意味着它的值将随着数据属性的变化而变化。
7. @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进行状态管理。具体解释如下：

1. 导入了mapState, mapGetters, mapActions这三个辅助函数，用于简化在组件中访问Vuex的状态、getter和action。

2. 定义了一个名为addclassmsg的数据属性用来存储textarea标签中的值，初始值为空字符串。

3. 使用computed属性来简化访问Vuex的state和getter。这里定义了两个计算属性：addclassmsgx和classmsgs，分别对应Vuex中的state.addclassmsgx和state.classmsgs。

4. 在methods中，使用mapActions简化了访问Vuex的action。这里定义了三个方法：increment、decrement和tijiao，分别对应Vuex中的actions.increment、actions.decrement和actions.tijiao。

5. 定义了一个名为inputchange的方法，用于将addclassmsg的值通过savecalssmsg这个mutation保存到Vuex的state中。

6. 定义了一个名为sub的方法，用于提交表单。首先打印addclassmsg的值，然后通过调用addclassmsg这个action将其添加到Vuex的state中，最后清空addclassmsg的值。

7. 定义了一个名为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应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

1. state：定义了应用的状态树，这里有两个状态属性：addclassmsgx 和 classmsgs。addclassmsgx 用于存储添加的班级信息，classmsgs 是一个数组，用于存储班级任务列表。

2. mutations：定义了改变状态的方法。每个方法接收两个参数：state 和 payload。state 是当前的状态对象，payload 是调用该 mutation 时传递的数据。这里有四个 mutation：

   • saveclass：将传入的数据保存到 addclassmsgx 中。
   • saveclasstask：将 addclassmsgx 的内容添加到 classmsgs 数组中。
   • xdelmsg：删除 classmsgs 数组中的指定元素。注意，这里的代码有一个错误，indexOf() 函数缺少参数，应该是 indexOf(data)。

3. actions：定义了异步操作，可以提交多个 mutation。每个 action 接收一个 context 对象，通过 context.commit() 方法提交 mutation。这里有五个 action：

   • increment 和 decrement：这两个 action 没有实际作用，是示例代码的一部分。
   • savecalssmsg：接收数据并将其传递给 saveclass mutation。
   • addclassmsg：提交 saveclasstask mutation，将 addclassmsgx 的内容添加到 classmsgs 数组中。
   • delmsg：接收数据并将其传递给 xdelmsg mutation，删除 classmsgs 数组中的指定元素。

4. new Vuex.Store()：创建一个 Vuex store 实例，并将上述定义的对象作为参数传入。这样，我们就可以在整个应用程序中使用这个 store 来管理状态。