Vuex全局存储实现数据共享

1. 在store文件夹下找到index.js文件打开

export default new Vuex.Store({
//定义全局存储的数据名
    state: {
     songList ：[]
    },
    //对state中的数据做初加工
    getters: {},
    //修改data中数据
    mutations: {
       //定义一个方法 state是state中数据，第二个是要存储的数据
        songList(state, value) {
            state.songList = value.songList
        }
    },
    //可以异步的更改state中的数据
    actions: {},
    //模块化
    modules: {}
})

2. 全局存储

//全局存储数据
//用commit方法
//第一个参数是在mutations中定义的方法名，第二个参数是要存储的数据
        this.$store.commit('songList',{songList:res.result})

3. 取出全局存储数据
   在html中使用$store.state.数据名在方法中使用this.$store.state.数据名