!DOCTYPE htmlhtml head meta charset=utf-8 titletitle script src=vuejsscript script src=vuexjsscript head body div id=app button click=asyc异步操作button pthis$storestatecountp div script var
<p>代码没有明显的语法错误，但可能存在以下问题：</p>
<ol>
<li>在mutations中使用了异步操作，这是不推荐的做法，因为mutations应该是同步的。如果需要进行异步操作，应该使用actions。</li>
<li>在mutations中使用了setTimeout函数，这会导致在1秒后才更新state，但是在点击异步操作按钮后，状态会立即更新为“正在执行异步操作”，这可能会给用户造成困惑。</li>
<li>在模板中使用了this.$store.state.count来获取状态值，这是不必要的，可以直接使用{{count}}来获取。</li>
</ol>
<p>建议修改代码如下：</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../vue.js"></script>
<script src="../../vuex.js"></script>
</head>
<body>
<div id="app">
<button @click="asyc">异步操作</button>
<p>{{count}}</p>
</div>
<script>
var store= new Vuex.Store({
state:{count:0},
mutations:{
increment(state){
state.count++
}
},
actions:{
asyc({commit}){
setTimeout(function(){
commit('increment')
},1000)
}
}
})
var vm = new Vue({
el:'#app',
store,
computed:{
count(){
return this.$store.state.count
}
},
methods:{
asyc(){
this.$store.dispatch('asyc')
}
}
})
</script>
</body>
</html>
<p>修改后的代码使用了actions来进行异步操作，并且在mutations中只进行同步的操作。同时，模板中使用了计算属性来获取状态值，代码更加简洁易懂</p>
原文地址: https://www.cveoy.top/t/topic/fjqj 著作权归作者所有。请勿转载和采集!