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>

[Nuxt] Update Vuex State with Mutations and MapMutations in Vue.js的更多相关文章

  1. Vuex - state , getters , mutations , actions , modules 的使用

      1, 安装   vue add vuex 2, 安装完之后会自动生成store文件夹,并在main.js中自动引用 store/index.js 3,在store文件夹下的index.js中定义 ...

  2. [Nuxt] Update State with Vuex Actions in Nuxt.js

    You can conditionally add classes to Vue.js templates using v-bind:class. This will help display the ...

  3. how to watch vuex state update

    how to watch vuex state update watch https://vuex.vuejs.org/api/#watch https://vuex.vuejs.org/guide/ ...

  4. vuex状态管理,state,getters,mutations,actons的简单使用(一)

    之前的文章中讲过,组件之间的通讯我们可以用$children.$parent.$refs.props.data... 但问题来了,假如项目特别大,组件之间的通讯可能会变得十分复杂... 这个时候了我们 ...

  5. 组件之间的通讯:vuex状态管理,state,getters,mutations,actons的简单使用(一)

    之前的文章中讲过,组件之间的通讯我们可以用$children.$parent.$refs.props.data... 但问题来了,假如项目特别大,组件之间的通讯可能会变得十分复杂... 这个时候了我们 ...

  6. Vue Vuex state mutations

    Vuex 解决不同组件的数据共享,与数据持久化 1.npm install vuex --save 2.新建store.js 并引入vue vuex ,Vue.use(Vuex) 3.state在vu ...

  7. Vuex入门实践(中)-多module中的state、mutations、actions和getters

    一.前言 上一篇文章<Vuex入门实践(上)>,我们一共实践了vuex的这些内容: 1.在state中定义共享属性,在组件中可使用[$store.state.属性名]访问共享属性 2.在m ...

  8. Nuxt使用Vuex

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 基础知识这里不再重述,学习的话请自行到官网 ...

  9. [译]Managing Vue.js State with Vuex

    原文 准备 安装 Vuex, 是Vue官方出的package, 它不是Vue内置的.需要另外安装. npm install vuex --save 然后,需要在应用启动文件启用Vuex. main.j ...

随机推荐

  1. spring webSocket The HTTP response from the server [200] did not permit the HTTP upgrade to WebSocket

    在springboot 1.5.9版本 WebSocketConfig配置 registry.addEndpoint("/webSocket").withSockJS();在加了. ...

  2. 2017国家集训队作业[agc008f]Black Radius

    2017国家集训队作业[agc008f]Black Radius 时隔4个月,经历了省赛打酱油和中考各种被吊打后,我终于回想起了我博客园的密码= = 题意: ​ 给你一棵树,树上有若干个关键点.选中某 ...

  3. [Redux-Observable && Unit Testing] Mocking an ajax request when testing epics

    Often in unit tests we are focussing on the logic involved in crafting a network request, & how ...

  4. 10款jQuery/CSS3动画应用 超有用

    http://www.html5tricks.com/10-jquery-css3-animation.html

  5. Codeforces Round #312 (Div. 2) E. A Simple Task 线段树 延时标记

    E. A Simple Task time limit per test5 seconds memory limit per test512 megabytes inputstandard input ...

  6. 如果笔记本的 WIN7 运行很卡,请尝试运行这些批处理

    如果笔记本的 WIN7 运行很卡,请尝试运行这些批处理 WIN7是不是很卡?关掉下列服务吧 @echo off rem AppXSvc 为部署应用商店应用程序提供基础结构支持 rem BITS 微软的 ...

  7. 23. Node.Js Buffer类(缓冲区)-(三)文件读取实例

    转自:https://blog.csdn.net/u011127019/article/details/52513109

  8. 开源性能测试工具——jemeter介绍+安装说明

    一. Apache JMeter介绍 1. Apache JMeter是什么 Apache JMeter 是Apache组织的开放源代码项目,是一个100%纯Java桌面应用,用于压力测试和性能测量. ...

  9. itchat转发指定的微信群里某个用户的发言到指定的群

    复读机功能, 如果有比较多的用户,超出500人,那就得分开至少两个群,如何把一些消息自动复制到另一个群呢. 自动转发指定用户的发言,转发到别的群 # !/usr/bin/env python # -* ...

  10. VMware Tools安装问题的解决

    一.VMware Tools工具的作用 VMware虚拟机的插件工具,安装上它可以实现主机与虚拟机的文件共享及拖放.简单的说就是从Ubuntu上边经常输入命令行会出现错误的情况,需要复制到Window ...