vuex能完成组件的通信，官方解析：vuex是一个专为vue.js应用程序开发的状态管理模式。他采用集中式存储管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex也集成到vue的官方调试工具devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
官方说明
引入：在main.js中引入store。（import store from './store';）
使用：单独在src下新建store文件夹，在这个文件加下先新建index.js、actions.js、getters.js、mutations.js、mutation-types.js、state.js这几个文件，index.js作为入口文件
在index.js文件引入vue、vuex和其他文件
import Vue from 'vue' import Vuex from 'vuex' import * as actions from './actions' import * as getters from './getters' import state from './state' import mutations from './mutations' import createLogger from 'vuex/dist/logger'//控制台打印记录 Vue.use(Vuex);//注册插件 const debug = process.env.NODE_ENV !== 'production' export default new Vuex.Store({ actions, getters, state, mutations, strict: debug, plugins: debug ? [createLogger()] : [] })每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。
在上面已经创建了几个文件，现在就是使用的时候了
（1）、state.js，里面定义的是数据的初始状态，如，开发音乐播放器项目中的一些初始数据
/** * @type singer: {} 歌手 * @type playing: boolean 播放 * @type fullScreen: boolean 播放器展开 * @type playlist: Array 播放列表 * @type sequenceList: Array 歌曲顺序列表 * @type mode: number 播放模式(单曲循环、循环列表、随机播放) * @type currentIndex: number 当前播放索引 * @type disc: {} 推荐页面歌单对象 * @type topList: {} 排行榜 * @type searchHistory: * 搜索历史 * @type playHistory: * 播放历史 * @type favoriteList: * 收藏 */ const state = { singer: {}, playing: false, fullScreen: false, playlist: [], sequenceList: [], mode: playMode.sequence, currentIndex: -1, disc: {}, topList: {}, searchHistory:loadSearch(), playHistory:loadPlay(), favoriteList: loadFavorite() }; export default state;
（2）、getters.js，取state.js中的数据到组件
import state from "./state"; export const singer = state => state.singer; export const playing = state => state.playing; export const fullScreen = state => state.fullScreen; export const playlist = state => state.playlist; export const sequenceList = state => state.sequenceList; export const mode = state => state.mode; export const currentIndex = state => state.currentIndex; export const currentSong = (state) => {//当前歌曲 return state.playlist[state.currentIndex] || {} } //推荐页 export const disc = state => state.disc; //排行榜 export const topList = state => state.topList export const searchHistory = state => state.searchHistory export const playHistory = state => state.playHistory export const favoriteList = state => state.favoriteList
组件中
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
<template> <div class="mini-player" v-show="!fullScreen"> ... </div> </template> <script type="text/ecmascript-6"> import {mapGetters} from 'vuex'; export default{ computed:{ ...mapGetters([ 'fullScreen', ]) } }</script>
（3）、mutation-types.js，用于定义常量
export const SET_SINGER = 'SET_SINGER'; export const SET_PLAYING_STATE = 'SET_PLAYING_STATE'; export const SET_FULL_SCREEN = 'SET_FULL_SCREEN'; export const SET_PLAYLIST = 'SET_PLAYLIST'; export const SET_SEQUENCE_LIST = 'SET_SEQUENCE_LIST'; export const SET_PLAY_MODE = 'SET_PLAY_MODE'; export const SET_CURRENT_INDEX = 'SET_CURRENT_INDEX'; //推荐页 export const SET_DISC = 'SET_DISC'; //排行榜 export const SET_TOP_LIST = 'SET_TOP_LIST'; export const SET_SEARCH_HISTORY = 'SET_SEARCH_HISTORY'; export const SET_PLAY_HISTORY = 'SET_PLAY_HISTORY'; export const SET_FAVORITE_LIST = 'SET_FAVORITE_LIST';
（4）、mutations.js，用于修改mutation-types.js中定义的常量的值，因为你不能直接改变 store 中的状态。更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
import * as types from './mutation-types';//引入mutation-types const mutatuons = { //第二个参数 msg 需要另外传入 //定义mutation相关的修改方法，方法名为mutation-types里的常量（[types.SET_SINGER]），第一个参数state为state.js中的状态，第二个参数是提交mutation [types.SET_SINGER](state, singer) { state.singer = singer //然state.js中的状态等于提交的mutation，这样就完成了修改 }, [types.SET_PLAYING_STATE](state, flag) { state.playing = flag }, [types.SET_FULL_SCREEN](state, flag) { state.fullScreen = flag }, [types.SET_PLAYLIST](state, list) { state.playlist = list }, [types.SET_SEQUENCE_LIST](state, list) { state.sequenceList = list }, [types.SET_PLAY_MODE](state, mode) { state.mode = mode }, [types.SET_CURRENT_INDEX](state, index) { state.currentIndex = index }, //推荐页 [types.SET_DISC](state, disc) { state.disc = disc }, //排行榜 [types.SET_TOP_LIST](state, topList) { state.topList = topList }, [types.SET_SEARCH_HISTORY](state, history) { state.searchHistory = history }, [types.SET_PLAY_HISTORY](state, history) { state.playHistory = history }, [types.SET_FAVORITE_LIST](state, list) { state.favoriteList = list } }
组件中
可以使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。
<template> <div class="mini-player" v-show="!fullScreen" @click='open'> ... </div> </template> <script type="text/ecmascript-6"> import {mapMutations} from 'vuex'; export default{ methods:{ open(){ this.setFullScreen(true); }, ...mapMutations([ setFullScreen:'SET_FULL_SCREEN' ]) } }</script>
（5）、actions.js，Action类似于mutation，不同在于Action 提交的是 mutation，而不是直接变更状态；Action可以包含任意异步操作
import * as types from './mutation-types'; //歌曲列表点击随机播放全部 export const randomPlay = function ({commit}, {list}) { commit(types.SET_PLAY_MODE, playMode.random); commit(types.SET_SEQUENCE_LIST, list); let randomList = shuffle(list); commit(types.SET_PLAYLIST, randomList); commit(types.SET_CURRENT_INDEX, 0); commit(types.SET_FULL_SCREEN, true); commit(types.SET_PLAYING_STATE, true); };
组件
<template> <div class="play" v-show="songs.length>0" ref="playBtn" @click="random"> <i class="icon-play"></i> <span class="text">随机播放全部</span> </div> </template> <script type="text/ecmascript-6"> import {mapActions} from 'vuex'; export default { methods:{ random() { this.randomPlay({ list: this.songs }) }, ...mapActions([ 'randomPlay'//store文件下的action.js下的函数 ]) } } </script>
转载于:https://www.cnblogs.com/YAN-HUA/p/9141166.html
相关资源：JAVA上百实例源码以及开源项目