一個“錯誤”的vuex寫法：vuex重新整理了資料但是檢視沒有重新整理
阿新 • • 發佈：2019-01-26
這是個很尷尬的問題，讓我猜猜看你的程式碼是不是這樣寫的：
<template> <div id="app"> <img src="./assets/logo.png"> <button @click="clickme">點選我</button> <span>{{countnumber}}</span> </div> </template> <script> export default { name: 'app', data() { return { countnumber: this.$store.state.count, } }, methods: { clickme: function() { this.$store.commit("increment"); } }, } </script> <style> </style>
那麼恭喜你，無論你怎麼平明點，都會是0.但是如果你是下面這種寫法，那就是正確的了：
<template> <div id="app"> <img src="./assets/logo.png"> <button @click="clickme">點選我</button> <span>{{$store.state.count}}</span> </div> </template> <script> export default { name: 'app', data() { }, methods: { clickme: function() { this.$store.commit("increment"); } }, } </script> <style> </style>
區別就是你直接關聯到介面裡面。為什麼這樣？不清楚，畢竟是別人的框架