Vue:使用Vuex更改嵌套在Vue Router中的组件中的值的最佳实践
Vue:使用Vuex更改嵌套在Vue Router中的组件中的值的最佳实践
提问于 2021-11-23 06:50:29
我是Vue、Vue Router和Vuex的新手。
请建议使用Vuex存储更改/更新嵌套在Vue Router中的组件中的值的最佳实践。我编写了一个简单的代码，通过点击按钮来更改组件中的数字，但似乎无法正常工作。
下面是我写的代码：
// Trying to change the value in the component,
// but not updating the DOM, only the value in the state
function incrementValueInComponent(){
store.commit('increment');
alert("number in the store is: " + store.state.testNumber);
}
// *** Vuex store ***
const store = new Vuex.Store({
state: {
testNumber: 0
},
mutations: {
increment (state) {
state.testNumber++
}
}
});
// *** Component and Vue router ***
const Foo = {
store:store,
data(){
return {
myNumber:this.$store.state.testNumber
}
},
template: '<div>{{myNumber}}</div>' ,
}
const routes = [
{ path: '/', component: Foo }
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Vue, Vuex, Vue router-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/">Top Page</router-link>
</p>
<router-view></router-view>
<button class="btn" onclick="incrementValueInComponent()">Increment Number</button>
</div>
<script src="javascript.js"></script>
</body>
</html>
是我做错了什么，还是这种方法违背了Vue的概念？任何建议都将不胜感激。提前谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-11-23 08:49:10
使用computed
const Foo = {
store:store,
computed: {
myNumber () {
return this.$store.state.testNumber
}
}
template: '<div>{{myNumber}}</div>' ,
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70076493
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号