Vuexのコアコンセプト入門必見
11895 ワード
次の内容は、エディタで直接表示できます.
小結:stateオブジェクトはvuexの唯一の共通データソースです.mutationsはvuexの共通データを変更する権利しかありません.Actionsは一般的に非同期の操作を処理し、共通データを変更するにはmutationsを借りて実現する必要がある.gettersはvueの計算属性に似ており、公共データを直接変えることはできず、公共データだけを包装する役割を果たし、公共データの変化も包装されたデータに影響を与える.vueコンポーネント内のイベント呼び出し時にパラメータを渡すことができ、vuexで2番目のパラメータ受信を使用することに対応します.
もし間違いがあれば、教えてください.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vuex </title>
</head>
<body>
<!--
1. :
:v-bind
:v-on
:EventBus
2.vuex: , , vuex
3.vuex
:npm i vuex --save
:import Vuex from 'vuex'
:Vue.use(Vuex)
vuex :const store =new Vuex.Store({
state
state:{
a:1
}
})
vue :new Vue({
el:'#app',
renser:h=>h(app),
router,
stotre
})
4.vuex :state( ),mutations( state ),actions( ),
getters( state , state , , vue )
export default new Vuex.Store({
state:{
a:0
},
mutations:{
add(state,step) {
state.a+=step
}
},
actions:{
addAsync(context,step) {
setTimeout(()=>{
context.commit('add',step)
},1000)
}
},
getters:{
show:state => {
return ' "+state.a+" '
}
}
})
state :this.$store.state. (a); {{$store.state.a}}this
mutations add ,state state ,step ;
methods :this.$store.commit('mutations add',8) ,8
actions addAsync ,context mutations ,context.commit
mutations ;step
methods :this.$store.dispatch(' addAsync',8) ,8
getters show ,state ,state getters
:this.$store.getters. (show), {{$store.getters.show}}this
-->
</body>
</html>
小結:stateオブジェクトはvuexの唯一の共通データソースです.mutationsはvuexの共通データを変更する権利しかありません.Actionsは一般的に非同期の操作を処理し、共通データを変更するにはmutationsを借りて実現する必要がある.gettersはvueの計算属性に似ており、公共データを直接変えることはできず、公共データだけを包装する役割を果たし、公共データの変化も包装されたデータに影響を与える.vueコンポーネント内のイベント呼び出し時にパラメータを渡すことができ、vuexで2番目のパラメータ受信を使用することに対応します.
もし間違いがあれば、教えてください.