vuex實現(xiàn)像調(diào)用模板方法一樣調(diào)用Mutations方法

更新時間：2019年11月06日 10:26:04 作者：周行知

今天小編就為大家分享一篇vuex實現(xiàn)像調(diào)用模板方法一樣調(diào)用Mutations方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

我們在寫vue項目中如果，我們發(fā)現(xiàn)vuex中<button @click="$store.commit('jia')">-</button>是十分麻煩的，我們想直接寫成@click中的jia，我們應該如何處理？

我們可以想一想我們在解決state時是如何解決的，為此我們將介紹一個與解決state相同方案

第一步在我們自己創(chuàng)建模板a.vue里引入我們的mapMutations

代碼如下:

import {mapState,mapMutations} from 'vuex'

注：此處的mapMutations就是我們要引入，而你對比state的方法其實就是引入mapState

第二步在模板的<script>標簽里添加methods屬性，并加入mapMutations

代碼如下:

<script>

 import store from '@/store'

 import {mapState,mapMutations} from 'vuex'

 export default{

  data(){

   return{


   }

  },

computed:mapState(["num"]),

  methods:mapMutations([//只關注此欄

  

  'jia'

  

  ]),

  store

 }

</script>

第三步在模板中直接寫入

<template>

 <div>

  <h3>{{num}}</h3> 

<button @click="jia">+</button><!--此處--> 

<div>

</template>

補充部分:store.js代碼

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const state={//狀態(tài)對象

num:0,

}

const mutations={//觸發(fā)狀態(tài)

jian(state){

state.num++

},

}

測試：點擊button按鈕它會一直加加

以上這篇vuex實現(xiàn)像調(diào)用模板方法一樣調(diào)用Mutations方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue在手機中通過本機IP地址訪問webApp的方法
這篇文章主要介紹了vue在手機中通過本機IP地址訪問webApp的方法,需要的朋友可以參考下
2018-08-08
基于Vue的移動端圖片裁剪組件功能
這篇文章給大家介紹了基于Vue的移動端圖片裁剪組件功能，因為移動端是用vue，所以就寫成了一個vue組件，下面就說說自己的一些實現(xiàn)思路,需要的朋友可以參考下
2017-11-11
vue3中不支持.sync語法糖的解決方法
在 Vue 3 中,.sync 修飾符已經(jīng)被移除,在 Vue 2 中,.sync 修飾符是一個語法糖,用于簡化子組件和父組件之間的雙向數(shù)據(jù)綁定,那么本文將給大家介紹一下vue3中不支持.sync語法糖的解決方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-01-01
Vue項目部署在Spring Boot出現(xiàn)頁面空白問題的解決方案
這篇文章主要介紹了Vue項目部署在Spring Boot出現(xiàn)頁面空白問題的解決方案,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-11-11
Vue過濾器,生命周期函數(shù)和vue-resource簡單介紹
這篇文章主要介紹了Vue過濾器,生命周期函數(shù)和vue-resource簡單介紹，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2021-01-01
解決vue2+vue-router動態(tài)路由添加及路由刷新后消失問題
這篇文章主要介紹了解決vue2+vue-router動態(tài)路由添加及路由刷新后消失問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-08-08
Vue封裝遠程下拉框組件的實現(xiàn)示例
本文主要介紹了Vue封裝遠程下拉框組件的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-07-07
vue-cli 默認路由再子路由選中下的選中狀態(tài)問題及解決代碼
這篇文章主要介紹了vue-cli 默認路由再子路由選中下的選中狀態(tài)問題及解決代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-09-09
Vue項目如何獲取本地文件夾絕對路徑
這篇文章主要介紹了Vue項目如何獲取本地文件夾絕對路徑問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
在vue-cli3中使用axios獲取本地json操作
這篇文章主要介紹了在vue-cli3中使用axios獲取本地json操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07