!DOCTYPE htmlhtml head meta charset=UTF-8 titletitle script src=vuejsscript script src=vuexjsscript head body div id=app button type=button click=mut查看mutations接收的参数button button type=button
<ol>
<li>在 Vuex 的配置中，state 被写成了 sate，应该改为 state。</li>
<li>在 mutations 的 test 函数中，$state 应该改为 state。</li>
<li>在 actions 的 test1 函数中，console.log(context) 应该改为 console.log(context.state)，因为 context 包含了多个属性，而我们需要打印的是状态 state。</li>
<li>在 HTML 中，第二个按钮的文字应该是“查看actions接收的参数”，而不是“查看mutations接收的参数”。</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 type="button" @click="mut">查看mutations接收的参数</button>
<button type="button" @click="act">查看actions接收的参数</button>
</div>
<script>
var mapState=Vuex.mapState
const store=new Vuex.Store({
state:{
name:'vuex直接引用',
age:30,
gender:'男'
},
mutations:{
test(state){
console.log(state)
}
},
actions:{
test1(context,parm){
console.log(context.state)
console.log(parm)
}
}
})
let vm=new Vue({
el:'#app',
store,
methods:{
mut(){
this.$store.commit('test')
},
act(){
this.$store.dispatch('test1','我是传递的参数')
}
}
})
</script>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/ff6y 著作权归作者所有。请勿转载和采集!