mutations
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[Vue]]
&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents
* 概要 [#r6f0e489]
Vuex中store数据改变的唯一方法就是mutation
通俗理解mutations，里面装着一些改变数据方法的集合，这是Vu...
&color(red){Vuex 中的 mutation 非常类似于事件};：每个 mut...
#codeprettify{{
// 页面路径：store/index.js
import { createStore } from 'vuex'
const store = createStore({
state: {
count: 1
},
mutations: {
//注册事件，add，handler第一个参数是state；
add(state) {
// 变更状态
state.count += 2
}
}
})
export default store
store.commit('increment') //调用type，触发handler（stat...
}}
注意：store.commit 调用 mutation（需要在根节点注入 store...
#codeprettify{{
<!-- 页面路径：pages/index/index.vue -->
<template>
<view>
<view>数量：\{\{count\}\}</view>
<button @click="addCount">增加</button>
</view>
</template>
<script>
import store from '@/store/index.js'
export default {
computed: {
count() {
return this.$store.state.count
}
},
methods: {
addCount() {
store.commit('add')
}
}
}
</script>
}}
&color(red){Mutation 必须是同步函数}; 一条重要的原则就是...
* 使用 [#j2cf8cce]
** 传参 [#df0482ea]
载荷（payload）
简单理解，就是往handler(stage)中传参handler(stage,payload...
&color(red){不推荐的传参方法};
#codeprettify{{
state: {
count: 1
},
mutations: {
increment (state, payload) {
state.count += payload
}
}
store.commit('increment', 10)
}}
&color(red){推荐的传参方法};
#codeprettify{{
state: {
count: 1
},
mutations: {
increment (state, payload) {
state.count += payload.num
}
}
store.commit('increment', {num:10})
}}
#hr();
コメント：
#comment_kcaptcha
終了行:
[[Vue]]
&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents
* 概要 [#r6f0e489]
Vuex中store数据改变的唯一方法就是mutation
通俗理解mutations，里面装着一些改变数据方法的集合，这是Vu...
&color(red){Vuex 中的 mutation 非常类似于事件};：每个 mut...
#codeprettify{{
// 页面路径：store/index.js
import { createStore } from 'vuex'
const store = createStore({
state: {
count: 1
},
mutations: {
//注册事件，add，handler第一个参数是state；
add(state) {
// 变更状态
state.count += 2
}
}
})
export default store
store.commit('increment') //调用type，触发handler（stat...
}}
注意：store.commit 调用 mutation（需要在根节点注入 store...
#codeprettify{{
<!-- 页面路径：pages/index/index.vue -->
<template>
<view>
<view>数量：\{\{count\}\}</view>
<button @click="addCount">增加</button>
</view>
</template>
<script>
import store from '@/store/index.js'
export default {
computed: {
count() {
return this.$store.state.count
}
},
methods: {
addCount() {
store.commit('add')
}
}
}
</script>
}}
&color(red){Mutation 必须是同步函数}; 一条重要的原则就是...
* 使用 [#j2cf8cce]
** 传参 [#df0482ea]
载荷（payload）
简单理解，就是往handler(stage)中传参handler(stage,payload...
&color(red){不推荐的传参方法};
#codeprettify{{
state: {
count: 1
},
mutations: {
increment (state, payload) {
state.count += payload
}
}
store.commit('increment', 10)
}}
&color(red){推荐的传参方法};
#codeprettify{{
state: {
count: 1
},
mutations: {
increment (state, payload) {
state.count += payload.num
}
}
store.commit('increment', {num:10})
}}
#hr();
コメント：
#comment_kcaptcha
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
