Web前端开发技术:Vuex状态管理

最新推荐文章于 2022-02-08 10:22:39 发布

nickdlk

最新推荐文章于 2022-02-08 10:22:39 发布

阅读量433

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43924621/article/details/112718095

版权

VUE 专栏收录该内容

7 篇文章 3 订阅

订阅专栏

一、实验目的：

掌握Vuex实例对象的配置方法。
掌握Vuex API接口的使用方法。

二、实验要求：

了解Vuex的基本概念。
掌握Vuex 下载安装方法。
编写程序完成以下实验内容并上交实验报告

三、实验内容：

（一）实验基础

1、Vuex插件
组件状态即组件中的数据、功能等信息，使用Vuex对应用的所有组件的状态进行集中管理，使组件状态容易维护以及实现共享。
2、本次实验可以通过模仿借鉴如教材【例6-9】的实现，初步掌握Vuex相关知识及应用方法。

（二）实验题

请编程实现列表的增、删、改、查操作。

四、设计思路：

使用vuex存储数据，增加操作使用commit提交到mutation，push到列表；删除和修改都是将id传入到mutation，遍历数据找到对应的text，修改是将同时传入的text赋值给原变量；查找使用filter函数。

五、实验过程中遇到的问题及解决手段：

Commit提交多个参数，需要用大括号包围组成键值对传递。

六、程序源代码：




<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="vue.js"></script>
  <script src="vuex.js"></script>
</head>
<body>
<div id="app">
  <h2>列表查询</h2>
  <input type="text" v-model="id">
  <button @click="search">搜索</button>
  <p>搜索结果：{{ this.$store.getters.search }}</p>
  ID : <input type="text" v-model="add_id">
  Name :<input type="text" v-model="add_text">
  <button @click="m_add">增加</button>
  </p>
  删除ID为 : <input type="text" v-model="delete_id">
  <button @click="m_delete">删除</button>

  </p>
  修改ID : <input type="text" v-model="modify_id">
  为:<input type="text" v-model="modify_text">内容
  <button @click="m_modify">修改</button>
  <ul>
    <li v-for="item in this.$store.state.todos">{{ item }}</li>
  </ul>
</div>
<script>
  const store = new Vuex.Store({
    state: {
      todos: [
        { id: 1, text: '内容1' },
        { id: 2, text: '内容2' },
        { id: 3, text: '内容3' },
        { id: 4, text: '内容4' },
        { id: 5, text: '内容5' },
        { id: 6, text: '内容6' },
      ],
      id: 0
    },
    mutations: {
      search (state, id) {
        state.id = id
      },
      addlist (state,param) {
        console.log("addlist",add)
        state.todos.push({id:param.id,text:param.text})//添加到数组
      },
      delete(state,id){
        state.todos.map((v,i)=> {
          if(v.id == id){
            state.todos.splice(i,1)
          }
        })
      },
      modify(state,param){
        state.todos.map((v,i)=> {
          if(v.id == param.id){
            state.todos[i].text = param.text
          }
        })
      }
    },
    actions: {
    },
    getters: {
      search: state => {
        return state.todos.filter(todo => todo.id == state.id)
      },
    }
  })
  var vm = new Vue({
    el: '#app',
    data: { id: '' ,add_id:'',add_text:'',delete_id:"",modify_id:"",modify_text:""},
    store,
    methods: {
      //查找
      search () {
        this.$store.commit('search', this.id)
      },
      //增加
      m_add () {
        this.$store.commit('addlist',{id:this.add_id,text:this.add_text})//键值对传参
      },
      //删除
      m_delete(){
        this.$store.commit('delete', this.delete_id)
      },
      //修改
      m_modify(){
        this.$store.commit('modify', {id:this.modify_id,text:this.modify_text})
      }
    }
  })
</script>
</body>
</html>