[Nuxt] Update Vuex State with Mutations and MapMutations in Vue.js
2024-08-24 02:25:45
You commit changes to state in Vuex using defined mutations. You can easily access these state mutations in your template using mapMutations. This lesson shows you have to wire together your Vue.js template with your Vuex store using mutations and mapMutations.
store/index.js:
import Vuex from 'vuex'
const store = () => new Vuex.Store({
state: {
counter: 0
},
mutations: {
increment: (state) => {
state.counter++
},
decrement: (state) => {
state.counter--
}
}
})
export default store
pages/index.vue:
<template>
<div>
Counter: {{counter}}
<button @click='increment'>+</button>
<button @click='decrement'>-</button>
</div>
</template> <script>
import { mapState, mapMutations } from 'vuex' export default {
computed: {
...mapState({
counter: (state) => state.counter
})
}, methods: {
...mapMutations([
'increment',
'decrement'
])
}
}
</script>
最新文章
- Windows 下 zip 版的 MySQL 的安装
- 2015年12月10日 spring初级知识讲解（二）最小化Spring XML配置 注解
- 一段检测IP设备是否在线的代码
- csuoj 1395: Timebomb
- Linux Mysql 1130错误解决
- 炼数成金hadoop视频干货03
- java jvm学习笔记六（实现写自己的安全管理器）
- hdu 4710 Balls Rearrangement
- 可解压带中文名称文件的zip包
- c#indexof使用方法
- hdu 1059 Dividing 多重背包
- RQPro 公募FOF策略实例——晨星基金筛选和风险平价配置
- ajax调用数据案例，二级联动
- 排序1,2......n的无序数组，时间复杂度为o（n），空间复杂度为o（1）
- Cocos Creator Animation 组件
- Dreamweaver编辑区下方的属性栏显示
- python解决json序列化时间格式
- Hive学习01-基础常见问题
- 7.3 Models -- Creating And Deleting Records