VueX-数组对象的双向数据绑定

Vuex不允许在组件内部直接修改共享数据，需要在mutations中修改数据，所以涉及到双向绑定不能使用v-model

💡 需求

需要增加，删除数据，并且可以修改每一项的done

步骤

  1. 在state中提供一个对象数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
state: {
        list: [{
                id: 1,
                name: '吃吃',
                done: false
            },
            {
                id: 2,
                name: '喝喝',
                done: false
            },
            {
                id: 3,
                name: '学vue⭐',
                done: true
            }
        ]
    },
  1. 使用辅助函数mapState , 将数据展示在页面上，在App.vue中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div v-for="(item, index) in list" :key="index">
      <span> id: {{ item.id }} </span>
      <span> name: {{ item.name }} </span>
      <span> done: {{ item.done }} </span>
      修改done:
      <input
        type="text"
        :value="item.done"
      />
      <hr />
</div>

...
...

import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState('data', ['list'])
  },
}
123456789101112131415161718192021
  1. 在data.js中的 mutations中添加 增加 删除 的函数
1
2
3
4
5
6
7
8
mutations: {
        add(state) {
            state.list.push({ id: 4, name: '睡觉', done: true })
        },
        remove(state) {
            state.list.pop()
        }
    },
  1. 使用辅助函数mapMutations ， 将两个方法展示到页面上
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<button @click="add">增加数据</button>
<button @click="remove">删除数据</button>

...
...

import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState('data', ['list'])
  },
  methods: {
    ...mapMutations('data', ['add']),
    ...mapMutations('data', ['remove']),
}

5.修改done属性

  1. 添加输入事件
    • 给input框添加一个输入事件changeDone,并传入index实参。
    • 给input添加一个id，（注意需要动态设置，每一项的id都不相同，以便根据不同的id获取到不同的value值）
1
2
3
4
5
6
7
修改done:
      <input
        type="text"
        :value="item.done"
        @input="changeDone(index)"
        :id="index"
      />
  1. 在methods里面添加changeDone()函数
    • 根据输入框的不同id获取到数组不同项的value
    • 触发mutations，注意模块化需要添加模块名 data
    • 传递多个参数（注意只能传递一个参数，如果需要传递多个 需要以数组或者对象的形式传递） {index，val}
1
2
3
4
changeDone(index) {
      let val = document.getElementById(index).value
       this.$store.commit('data/changeDone', { index, val })
    }
  1. 在data.js的mutations中添加修改输入框值（done）的方法
    • 根据下标修改don的值
1
2
3
4
5
mutations: {
	changeDone(state, { index, val }) {
            state.list[index].done = val
        }
}

效果展示