Vuex更新state数据v组件v-model没有及时更新问题

Question

Operation:

// 省略代码
 <!-- collect -->
<div class="col-md-12 sus sus-collect">
    <li v-for="(list,key) in $store.state.list" :key="key" v-if="list.collect">
        <h1>{{list.titles}}</h1>
        <p>{{list.count}}</p>
        <div class="conter">
            <img src="../assets/del.png" alt="删除" title="删除">
            <img src="../assets/update.png" alt="修改" title="修改">
            <img src="../assets/copy.png" alt="复制内容" title="复制内容">
            <div class="conter-time">{{list.time}}</div>
        </div>
    </li>
</div>

Wirte:

<template>
  <div class="col-md-9">
    <form action="" class="bs-emample bs-example-from" v-for="(notes, val) in $store.state.notes" :key="val">
        <div class="input-group input-group-lg sus-mrtop20">
            <span class="input-group-addon">TITLES</span>
            <input type="text" class="form-control" v-model="notes.titles" :value="notes.titles" placeholder="Title">
        </div>
       <textarea name="" id="" cols="30" rows="30" class="form-control sus-mrtop20" v-model="notes.count" placeholder="control"></textarea>
    </form>
  </div>
</template>

<script>
import store from '@/vuex/store'
export default {
  name: 'Write',
  store
}
</script>

<style>

Vuex:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.config.productionTip = false

Vue.use(Vuex)
const state = {
  // 记录
  list: [
    {
      id: '1',
      titles: '数组1',
      count: '内容1',
      time: '2017-10-30',
      collect: false
    },
    {
      id: '2',
      titles: '数组2',
      count: '内容2',
      time: '2017-10-31',
      collect: true
    }
  ],
  conter: {
    // 删除记录index
    index: '1',
    // 复制记录index,
    copyindex: '1'
  },
  notes: [
    {
      id: '',
      titles: '',
      count: '',
      time: '',
      collect: ''
    }
  ]
}

const mutations = {
  // 删除记录
  Del (state, conter) {
    state.list.splice(conter.index, 1)
  },
  // 修改记录
  Modify (state, conter) {
    // state.notes[0].id
    state.notes[0] = state.list[conter.copyindex]
    console.log(state.notes[0])
    // for (var i = 0; i < Object.keys(clpy).length; i++) {
    //   if (clpy[i].id === state.notes[0]) {
    //     clpy[i] = state.note
    //   }
    // };
  }
}

export default new Vuex.Store({
  state,
  mutations
})

点击修改后，数据更新后没有及时更新view，有人碰到过这个问题吗

Answer 1

你vuex使用错了，v-model无法双向绑定vuex保存的状态

用mapState来获取状态，
用this.$store.dipatch action来修改数据

具体参看vuex官方文档

Answer 2

https://vuex.vuejs.org/zh-cn/...

看文档吧 详细的很