vuexはテンプレートメソッドを呼び出すようにMuttionsメソッドを呼び出すことを実現する。
私たちはvueプロジェクトを書いていますが、vuexの中で<button@click=「$store.co mmit」-は面倒くさいです。直接@clickの中のjiaに書きたいですが、どうすればいいですか?
私たちはstateを解決する時にどのように解決するかを考えられます。解決stateと同じ案を紹介します。
第一歩は自分でテンプレートを作成します。a.vueに私達のmapMuttionsを導入します。
コードは以下の通りです
二番目のステップはテンプレートの「script」タブにmethods属性を追加し、mapMuttionsを追加します。
コードは以下の通りです
上記のvuexはテンプレートを呼び出す方法のようにMuttionsを呼び出す方法は小編集で皆さんに提供するすべての内容を実現しました。参考にしていただければと思います。どうぞよろしくお願いします。
私たちはstateを解決する時にどのように解決するかを考えられます。解決stateと同じ案を紹介します。
第一歩は自分でテンプレートを作成します。a.vueに私達のmapMuttionsを導入します。
コードは以下の通りです
import {mapState,mapMutations} from 'vuex'
注:ここのmapMuttionsは私達が導入します。あなたがstateを比較する方法は、実際にはmapStateを導入します。二番目のステップはテンプレートの「script」タブにmethods属性を追加し、mapMuttionsを追加します。
コードは以下の通りです
<script>
import store from '@/store'
import {mapState,mapMutations} from 'vuex'
export default{
data(){
return{
}
},
computed:mapState(["num"]),
methods:mapMutations([//
'jia'
]),
store
}
</script>
Step 3テンプレートに直接書き込む
<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={//
num:0,
}
const mutations={//
jian(state){
state.num++
},
}
テスト:buttonボタンをクリックしてください。ずっと追加されます。上記のvuexはテンプレートを呼び出す方法のようにMuttionsを呼び出す方法は小編集で皆さんに提供するすべての内容を実現しました。参考にしていただければと思います。どうぞよろしくお願いします。