[Nuxt] Update Vuex State with Mutations and MapMutations in Vue.js
2023-09-14 09:00:51 时间
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>
相关文章
- Vue新手入门指南(易懂)
- (踩坑篇)vue element-ui resetForm()表单重置失效的问题
- 不用React Vue,只用原生JS,如何开发单页面应用?
- Vue学习之从入门到神经(两万字收藏篇)
- Vue框架设计的核心要素
- Vue上传文件操作(没有CV,认真看)
- 腾讯前端常考vue面试题整理
- Vue学习笔记之vue.js 两个等号 == 和三个等号===的区别 数字0和空字符串
- js读取本地json_vue读取本地json文件
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- vue如何引用js文件_html转化为vue组件
- vue引入js文件并使用_css引入js
- vue-jsonp_js创建json数组对象
- 使用 Vue.js Devtools 扩展作为 Vue 应用调试工具
- Vue中 webpackChunkName【魔法注释】
- uniapp或vue项目里如何接入第三方在线客服代码
- vue.js客服系统实时聊天项目开发(四)引入iconfont图标代码
- vue.js客服系统实时聊天项目开发(十二)自动欢迎信息的延迟展示效果
- Vue整合Echarts报错:“TypeError: Cannot read properties of undefined (reading ‘init‘)“
- Vue动态组件
- Vue.js 简介与入门指南
- Vue PC端UI框架
- Vue提示框组件vue-notification使用实例演示
- Thinking -- vue性能优化:保持 props 稳定
- 在VUE项目中添加使用SkeyeWebPlayer.js直播点播H5免费播放器
- vue.js 浏览器中不显示vue devtools详解编程语言
- Vue调用Redis体验更好的开发效率(vue能调redis吗)
- 构建基于Vue与Redis的高性能缓存系统(VUE redis缓存)