白店小二的面试总结——Vuex里怎么操作状态

最新推荐文章于 2021-07-02 17:37:17 发布

原创最新推荐文章于 2021-07-02 17:37:17 发布 · 126 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文详细介绍了如何在Vue项目中使用Vuex进行状态管理，包括在state中定义状态、通过mutations更改状态，以及使用Vuex获取响应式状态更改的目的。

（1）在state里定义状态

const state = {
    songsList: [],//当前播放歌曲所在的歌单,存每个歌曲的id,存入前处理
    recentSongs: [],//最近播放的歌曲
}
this.$store.state.list.songsList;//使用state里的数据，将其赋值给一个变量。

（2）在mutations里更改state的状态
像是事件注册，定义一个函数，当想要改变state的值时，调用 store.commit 方法，第一个参数为定义的函数名称，第二个参数为值。

const mutations = {
    songsList: (state, obj) => {//定义函数
        state.songsList = obj;
    },
    recentSongs: (state, obj) => {
        state.recentSongs = obj;
    },
}


self.$store.commit("list/songsList", info.playlist.tracks);//提交更改state的状态