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,有人碰到过这个问题吗
你vuex使用错了,v-model无法双向绑定vuex保存的状态
用mapState来获取状态,
用this.$store.dipatch action来修改数据
具体参看vuex官方文档