vue 如何使用vuex里面的值

在Vue中使用Vuex，你可以按照以下步骤操作：

1. **定义状态（State）**: 在`store.js`文件中，创建一个状态对象来存储共享的数据。例如：

   export default new Vuex.Store({
     state: {
       song: {} // 初始化为空的对象，用于存放音乐信息
     }
   })

在这里，`song`就是你想要在各个组件间共享的状态。

2. **修改状态（Mutations）**: 当需要更新状态时，使用mutations。它们是纯函数，接收一个状态对象作为参数并直接修改它。例如添加音乐信息：

   mutations: {
     updateSong(state, songData) {
       state.song = songData;
     }
   }

3. **获取状态（Getters）**: 对于读取状态，使用getters，这些通常是计算属性，可以根据当前状态进行计算。例如获取歌曲数据：

   getters: {
     getSong: (state) => state.song
   }

4. **在组件中使用**: 在Vue组件内，可以通过`this.$store.state`或`this.$store.getters`访问状态。比如，在音乐列表页：

   <button @click="submitSong">选择</button>
   <script>
   methods: {
     submitSong() {
       this.$store.commit('updateSong', { id: this.listItem.id, name: this.listItem.name });
     }
   }
   </script>

在音乐详情页：

   <div>{{ $store.getters.getSong }}</div>

5. **路由中的状态共享**: 如果在路由切换时需要携带状态，可以在导航守卫里使用`beforeEach`钩子，结合`getters`获取状态。