vuex

vuex能完成组件的通信，官方解析：vuex是一个专为vue.js应用程序开发的状态管理模式。他采用集中式存储管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex也集成到vue的官方调试工具devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

1、vuex安装

npm install vuex --save

2、vuex引入

官方说明

引入：在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()] : []
})

3、vuex的使用

每一个 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>

posted @ 2018-06-05 18:14 雨筠阅读(202) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

雨筠

vuex

1、vuex安装

2、vuex引入

3、vuex的使用

公告