current position：Home>Web front-end development technology: Vuex state management

Web front-end development technology: Vuex state management

2023-01-25 11:22:07【nickdlk】

一、实验目的：

掌握VuexThe configuration method of the instance object.
掌握Vuex API接口的使用方法.

二、实验要求：

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

三、实验内容：

（一）实验基础

1、Vuex插件
Component state is the data in the component、功能等信息,使用VuexCentrally manage the state of all components of the application,Make component state easy to maintain and share.
2、This experiment can be used for reference such as teaching materials through imitation【例6-9】的实现,初步掌握VuexRelevant knowledge and application methods.

（二）实验题

Please program to increase the list、删、改、查操作.

四、设计思路：

使用vuex存储数据,增加操作使用commit提交到mutation,push到列表;Deletions and modifications are subject to changeid传入到mutation,Traverse the data to find the corresponding onetext,Modifications are passed in at the same timetextassign to the original variable;查找使用filter函数.

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

Commit提交多个参数,It needs to be surrounded by curly braces to form a key-value pair transfer.

六、程序源代码：




<!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>

copyright notice
author[nickdlk],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2023/025/202301251105496740.html

The sidebar is recommended

guess what you like

Random recommended