vuex中mutations怎么调用
作者:互联网
做项目时候需要设定一个状态值为全局可以使用。所以使用vuex 在index.js当中state内设定属性。
state: { // 切换播放按钮 playPause: true }, mutations: { updataPlayPause: function (state) { state.playPause = !state.playPause } }
而如果在组件当中不可以直接对 state内属性直接进行修改。需要在mutations内定义方法对其进行修改。
根据视频教程书写 调用updataplaypause方法则会报错
import { mapMutations, mapState } from 'vuex' export default { data () { return { isShow: true } }, computed: { ...mapState(['playList', 'playListIndex', 'playPause']), ...mapMutations(['updataPlayPause']) }, mounted () { }, methods: { // 播放音乐 play: function () { // this.$refs.audio.paused 暂停状态 如果暂停 就点击播放 if (this.$refs.audio.paused) { this.$refs.audio.play() this.updataPlayPause() } else { this.$refs.audio.pause() this.updataPlayPause() } } } }
updataplaypause 不是一个函数,分析是因为this.updataplaypause() 被当做在组件内的一个方法,而又没有定义,所以报错。
修改调用方式。
methods: { // 播放音乐 play: function () { // this.$refs.audio.paused 暂停状态 如果暂停 就点击播放 if (this.$refs.audio.paused) { this.$refs.audio.play() this.$store.commit('updataPlayPause') } else { this.$refs.audio.pause() this.$store.commit('updataPlayPause') } } }
参考文章:https://www.yisu.com/zixun/692010.html
标签:play,调用,refs,mutations,updataPlayPause,paused,state,audio,vuex 来源: https://www.cnblogs.com/WangEDblog/p/16412394.html