邢台企业网站建设服务,WordPress单拦主题,电商公司经营范围,卓越亚马逊网站建设目的更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件#xff1a;每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。 接下来我们还是用上一篇文章在state中存放的count为例#xff0c;来看利用Mutation修改… 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。 接下来我们还是用上一篇文章在state中存放的count为例来看利用Mutation修改state的count属性。 利用commit来触发mutation函数 在mutation函数中添加count的add函数 const mutations {addNum (state) {state.num},add (state) {state.count 2}
}
export default mutations 在组件中使用mutation进行实现叠加器 templatediv classmutationp{{ count }}/pbutton clickaddCountADD/button/div
/templatescript
import store from /store/store
export default {computed: {count () {return this.$store.state.count}},methods: {addCount () {store.commit(add)}}
}
/script Mutation的载荷payload 你可以向store.commit传入额外的参数即mutation的载荷payload我们还是以上面累加器的例子来实现mutation函数的传参来动态定义累加的数量。 在mutation.js中修改add方法 const mutations {addNum (state) {state.num},add (state, n) {state.count n}
}export default mutations 在组件中store.commit如何传参 templatediv classmutationp{{ count }}/pbutton clickaddCountADD/button/div
/templatescript
import store from /store/store
export default {computed: {count () {return this.$store.state.count}},methods: {addCount () {store.commit(add, 5)}}
}
/script在mutation传参载荷可以传递一个参数也可以传递一个对象。让我们修改下上面的例子 mutation.js文件中修改如下 const mutations {addNum (state) {state.num},add (state, payload) {state.count payload.amount}
}export default mutations 组件中修改如下 templatediv classmutationp{{ count }}/pbutton clickaddCountADD/button/div
/templatescript
import store from /store/store
export default {computed: {count () {return this.$store.state.count}},methods: {addCount () {store.commit(add, { amount: 10 })}}
}
/script 在store.commit中可以进行对象风格的提交 依据上面的例子我们将组件中内容修改如下 templatediv classmutationp{{ count }}/pbutton clickaddCountADD/button/div
/templatescript
import store from /store/store
export default {computed: {count () {return this.$store.state.count}},methods: {addCount () {store.commit({type: add,amount: 8})}}
}
/script 使用常量替代 Mutation 事件类型 使用常量替代mutation事件类型在各种Flux实现中是很常见的模式。这样可以使 linter之类的工具发挥作用同时把这些常量放在单独的文件中可以让你的代码合作者对整个项目包含的mutation一目了然。这在在需要多人协作的大型项目中这会很有帮助。 我们在store中新建mutation-types.js文件文件内容如下 export const SOME_MUTATION SOME_MUTATION在mutation.js文件内容如下 import { ADD } from ./mutation-types
const mutations {addNum (state) {state.num},[ADD] (state) {state.count}
}export default mutations 在组件中内容和之前一致 templatediv classmutationp{{ count }}/pbutton clickaddCountADD/button/div
/templatescript
import store from /store/store
export default {computed: {count () {return this.$store.state.count}},methods: {addCount () {store.commit(add)}}
}
/script 在组件中使用this.$store全局属性来触发mutation函数 templatediv classmutationp{{ count }}/pbutton clickaddADD/button/div
/templatescript
export default {computed: {count () {return this.$store.state.count}},methods: {add () {this.$store.commit(add)}}
}
/script 在组件中使用mapMutations辅助函数 templatediv classmutationp{{ count }}/pbutton clickaddADD/button/div
/templatescript
import { mapMutations } from vuex
export default {computed: {count () {return this.$store.state.count}},methods: {...mapMutations([add])}
}
/script Mutation一条重要的原则就是要记住 mutation 必须是同步函数 转载于:https://www.cnblogs.com/wangshucheng/p/vux-003.html
