nuxt.js - 如何将通过突变存储的有效负载
问题描述
使用@click 事件添加数字但不起作用。
计数器.vue
<script>
import { mapState, mapMutations } from "vuex"
export default {
data() {
return{
//payload
value: 1,
}
},
computed: {
...mapState(["counter"])
},
method: {
...mapMutations(["addToCounter"])
}
}
</script>
在 main.js 上
import { createApp } from 'vue'
import { createStore } from "vuex";
import App from './App.vue';
const store = createStore({
state() {
return {
counter: 11,
}
},
mutations: {
addToCounter(state, payload){
state.counter = state.counter + payload;
}
}
})
//connecting store to the application
const app = createApp(App)
//using the store that is created
app.use(store)
app.mount('#app')
没有错误,但 addToCounter 不起作用,而在触发 @click 时应该将值添加到计数器。
解决方案
请在发布您的问题时努力格式化。
- 它应该是
methods
而不是method
。 - 是什么
main.js
?Nuxt 中没有这样的文件,您不必创建自己的商店,因为它已经被烘焙:https ://nuxtjs.org/docs/2.x/directory-structure/store createApp
并且createStore
与 Vue3 相关,因此与 Vue2 不兼容(目前 Nuxt 使用)- 您不应该调用 vuex 突变来更新状态,而应该调用其他可能会遇到问题的操作。
推荐阅读
- python - 熊猫数据框到一维数组
- eclipse - 如何在rcptt中获取当前工作目录
- angular - 带有 ng-template 和 async 的 ngIf 在 Angular 中短暂显示错误值
- python - 如何通过正则表达式拆分python列表
- angular - Angular 材质主题定制
- haskell - 如何为使用 Stack 构建的 Haskell 项目设置可执行输出位置?
- python - Scrapy:如何抓取从下拉列表中选择的多个网页
- c# - asp.net core 2.1 ef core 2.1 日期比较在服务器上不起作用
- jquery - 我可以在 jQuery 中获取一个项目所在的所有 div id 的数组吗?
- c# - 这个自相关公式是否正确编程?