Javascript 绑定复选框并使用vuex store和vuejs将所选项目添加到阵列中

在我的应用程序中，有一个项目数组。我正在显示这些项目以及复选框。现在，我想将这些复选框状态（勾选/取消勾选）与vuex store绑定，以获取所选项目

Vuex操作代码片段：

const actions:Actions = {
    changeCheckProducts({ state, commit, dispatch}, payload) {
    const { value, data } = payload
    const index = state.products.findIndex(
      item => item.id === data.id
    )
    if (index === -1) {
      return
    }
    commit('CHANGE_CHECK_PRODUCTS_DETAILS', { index, value })
    dispatch('addSelectedItems', {data})
  },
 addSelectedItems({commit, state} ,payload) {
   // How will i do that ??
  state.newArray.push(payload.id)
 commit('ADD_SELECTED_ITEMS', payload)
 },
}

const mutations: Mutations = {
    CHANGE_CHECK_PRODUCTS_DETAILS(state, payload) {
    const { index, value } = payload
    state.products[index].checked = value
  },
   ADD_SELECTED_ITEMS(state, payload) {
    // how to add selected items to a new array state
   },
}

    onSelectedItems(data) {
    this.$store.dispatch('changeCheckProducts', data)
  }

I have tried many things to implement this means to store checked items and updating the array if unchecked some items and checked other items. I am new to vuex.Please help me on this.
 I know there is some problems in my store. Please suggest me on this

存储变异代码片段：

const actions:Actions = {
    changeCheckProducts({ state, commit, dispatch}, payload) {
    const { value, data } = payload
    const index = state.products.findIndex(
      item => item.id === data.id
    )
    if (index === -1) {
      return
    }
    commit('CHANGE_CHECK_PRODUCTS_DETAILS', { index, value })
    dispatch('addSelectedItems', {data})
  },
 addSelectedItems({commit, state} ,payload) {
   // How will i do that ??
  state.newArray.push(payload.id)
 commit('ADD_SELECTED_ITEMS', payload)
 },
}

const mutations: Mutations = {
    CHANGE_CHECK_PRODUCTS_DETAILS(state, payload) {
    const { index, value } = payload
    state.products[index].checked = value
  },
   ADD_SELECTED_ITEMS(state, payload) {
    // how to add selected items to a new array state
   },
}

    onSelectedItems(data) {
    this.$store.dispatch('changeCheckProducts', data)
  }

I have tried many things to implement this means to store checked items and updating the array if unchecked some items and checked other items. I am new to vuex.Please help me on this.
 I know there is some problems in my store. Please suggest me on this

组件代码片段

<ul >
              <li aria-expanded="false"
                v-for="file in products"
                :key="file.id">
                <span>
                  <input type="checkbox"
                         :id="file.id"
                         :value="file.id"
                         v-model="checkedItems"
                         @change="onSelectedItems"/>
                  <span class="doc_input">
                    <i class="el-icon-document" aria-hidden="true"></i>
                  </span>
                  <span class="product__name">
                    {{file.name}}
                  </span>
                </span>
              </li>
            </ul>

---

修改方法如下：

onSelectedItems() {
  this.$store.dispatch('changeCheckProducts', this.checkedItems)
  // this.checkedItems looks like [1, 2, 3], each of which is ID of the selected product
}

您的Vuex商店：

changeCheckProducts({ commit }, payload) {
    commit('CHANGE_CHECK_PRODUCTS_DETAILS', payload)
    ...
}

...

// States should be handled in mutation only.
CHANGE_CHECK_PRODUCTS_DETAILS(state, payload) {
    state.products.forEach(product => {
        if (payload.indexOf(product.id) > -1) {
            product.checked = true
        }
    })
},

---

任何人都可以在这方面提供帮助。任何建议都将非常有用helpful@State（state=>state.productStore.products）产品。。。。在我的产品列表组件中检查我的答案，并让我知道它是否有效。