Vuex의 Mutations 수정 상태 작업에 대한 자세한 설명

이전 글은 상태 읽기에 관한 글이었고, 이번 글은 상태 수정에 관한 글입니다. 즉, Mutations를 조작하는 방법입니다.

1.$store.commit( )

Vuex는 status

1.store.js 파일

const mutations={
  add(state){
    state.count++
  },
  reduce(state){
    state.count--
  }
}

2 수정 방법을 버튼

b3400762fd733aead3821d2acaf0df17+65281c5ac262bf6d81768915a4a77ac0

077cb48f3558240155e427fd364a6d6d-65281c5ac262bf6d81768915a4a77ac0

2 .값 전달

상태를 수정하는 가장 간단한 작업입니다. 실제 프로젝트에서는 상태를 수정할 때 값을 전달해야 하는 경우가 많습니다. 예를 들어 위의 예에서는 매번 1만 추가했지만 이제 전달된 값을 추가해야 합니다. 실제로 Mutations에 다른 매개변수를 추가하고 커밋할 때 전달하기만 하면 됩니다. 특정 코드를 살펴보겠습니다.

1.store.js

const mutations={
  add(state,n){
    state.count+=n
  },
  reduce(state){
    state.count--
  }
}

2. 버튼의 commit() 메소드에 의해 전달된 매개변수를 수정합니다. 이는

446b1c6947ce5ac770af7ec924acd5b1+65281c5ac262bf6d81768915a4a77ac0

077cb48f3558240155e427fd364a6d6d-b550b74eee194d479305f9ea0f3e9957 add mapMutations

 methods:mapMutations([
    'add','reduce'
]),

3. 템플릿에서 직접 축소 또는 추가 방법을 사용하세요

332ba20590abb9cbe0e061a4f18eda49-65281c5ac262bf6d81768915a4a77ac0

참고: $store.commit

  reduce: function () {
   this.$store.commit('add', 10) // html标签是可以不写this
  }

를 캡슐화하세요.

보충 지식: vuex mutations 매개 변수 전달

다음으로 mutation의 매개 변수 전달에 대해 설명하겠습니다

학생 예제 추가

매개 변수를 전달하는 첫 번째 방법

<template>
 <p>
 <h3>-------------------这是mutations传参测试-------------------</h3>
 <p>
  {{this.$store.state.students}}//将已经有的学生渲染在这儿
  <p>
  <button @click="addstu">点击添加</button>//绑定添加事件
  </p>
 </p>
 </p>
</template>

<script>
export default {
 methods: {
  addstu () {
   const newstu = {
   id: 5,
   name: &#39;张国荣&#39;,
   age: 44
   }//定死一个要添加的学生，这就是要传给mutations的参数
   this.$store.commit(&#39;addStudent&#39;, newstu)
   //调用commit方法，更新state的数据，
   //第一个参数是mutations里面的方法名，
   //第二个参数是传给mutaitons里面addstudent方法的一个参数，
   //也就是要新加入的学生
  }
 }
}
</script>

vuex.store에서 이 매개 변수를 받습니다

const store = new Vuex.Store({
// 定义的公共变量
  state: {
   count: 1,
   students: [
    {
     id: 1,
     name: 'dx',
     age: 18
    },
    {
     id: 2,
     name: 'yx',
     age: 18
    },
    {
     id: 3,
     name: 'ym',
     age: 32
    },
    {
     id: 4,
     name: '刘亦菲',
     age: 30
    }
   ]
  },
 // state中的变量只能在mutations中通过方法修改
  mutations: {
   changeCount: function (state) {
   state.count++
   console.log('改变了count')
   },
   addStudent (state, stu) {
   state.students.push(stu)
   }//通过这种方式，接收来自组件传过来的新加入的学生
  },
  actions: {
  },
  getters: {
  }
})

매개변수를 전달하는 두 번째 방법

구성요소는 vuex에 매개변수를 전달합니다

addstu () {
   const newstu = {
   id: 5,
   name: '张国荣',
   age: 44
   }
   this.$store.commit({
   type: 'addStudent',
   newstu: newstu
   })//原先是传入两个参数，现在直接传入一个对象
   //type就是需要调用的mutations里面的方法
   //newstu就是要求接收的对象，也就是新加入的学生
  }

vuex는 매개변수를 전달하기 위해 구성요소를 받습니다

mutations: {
   addStudent (state, playload) {
   state.students.push(playload.newstu)
   }
  },

addstudent가 받은 두 번째 매개변수는 완전한 객체이므로 주의해야 합니다. 매개변수가 약간 다릅니다

관련 학습 권장사항:

javascript 비디오 튜토리얼

위 내용은 Vuex의 Mutations 수정 상태 작업에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!