詳解vuex的簡單使用

/*
* 是vuex的單一狀態(tài)數(shù)，用一個(gè)對象就包含了全部的應(yīng)用層級狀態(tài)
* 單一狀態(tài)樹讓我們能夠直接地定位任一特定的狀態(tài)片段，在調(diào)試的過程中也能輕易地取得整個(gè)當(dāng)前應(yīng)用狀態(tài)的快照。（用來管理所有vuex狀態(tài)數(shù)據(jù)）
*
*/

const state = {

 // 城市狀態(tài)，用來管理城市
 city: {},
 cityList: [],
 fullScreen: true,
 palyer: false
};

export default state;

/*
* 存取mutations相關(guān)的字符常量
*
*/

// 定義常量并導(dǎo)出
export const SET_CITY = 'SET_CITY';
export const SET_PLAY = 'SET_PLAY';
export const SET_FULL_SCREEN = 'SET_FULL_SCREEN';
export const SET_CITY_LIST = 'SET_CITY_LIST';

/*
 * 更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation
 * Vuex 中的 mutations 非常類似于事件：每個(gè) mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會接受 state 作為第一個(gè)參數(shù)
 */

// 導(dǎo)入mutation-type.js里面所有的常量
import * as types from './mutation-types';

// 定義一個(gè)mutation可以供設(shè)置和修改值
const mutations = {

 /*
 * 1 表達(dá)式作為屬性表達(dá)式放在方括號之內(nèi)
 * 2 形參state （獲取當(dāng)前狀態(tài)樹的state）
 * 3 形參city，是提交mutation時(shí)傳的參數(shù)
 * 4 使用mutation便于書寫方便
 * 5 這個(gè)操作相當(dāng)于往state.js里面寫入city
  */
 [types.SET_CITY](state, city) {
  state.city = city;
 },
 [types.SET_CITY_LIST](state, list) {
  state.cityList = list;
 },
 [types.SET_FULL_SCREEN](state, flag) {
  state.fullScreen = flag;
 },
 [types.SET_PLAY](state, palyState) {
  state.palyer = palyState;
 }
};

// 導(dǎo)出mutation
export default mutations;

/*
* 有時(shí)候我們需要從 store 中的 state 中派生出一些狀態(tài)
* 這里的常量主要是對state里面做一些映射
* mapGetters 輔助函數(shù)僅僅是將 store 中的 getters 映射到局部計(jì)算屬性
*/

// 對state里面的屬性做一些映射

export const city = state => state.city;  // 箭頭函數(shù)的簡寫
export const cityList = state => state.cityList;
export const fullScreen = state => state.fullScreen;
export const palyer = state => state.palyer;

/*
* actions類似mutation
* 區(qū)別：
* 1：action提交的是mutation
* 2：action可以包含任意異步操作
*/

/*
 * 使用：
 * 1：在一個(gè)動(dòng)作中多次改變mutation可以封裝一個(gè)action
 */

import * as types from './mutation-types';

export const selectList = function ({commit, state}, {list, index}) {
 commit(types.SET_CITY_LIST, list);
 commit(types.SET_PLAY, false);
 commit(types.SET_FULL_SCREEN, true);
};

/*
* 入口
*/

import Vue from 'vue';
import Vuex from 'vuex';

// import * as obj from 'xxxx'; 會將xxxx中所有export導(dǎo)出的內(nèi)容組合成一個(gè)對象返回。
import * as actions from './actions';

// 拿到getters里面的映射
import * as getters from './getter';
import state from './state';
import mutations from './mutations';
import createdLogger 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 ? [createdLogger()] : []
});

import {mapMutations, mapActions} from 'vuex';

...mapMutations({
 // 這里和mutation里面的常量做一個(gè)映射
 setCity: 'SET_CITY'
})

this.setCity(city);

import {mapGetters} from 'vuex';

computed: {
  // 這里面的city映射的是state.js里面的city
  // 可以映射多個(gè)值
  ...mapGetters([
   'city',
   'cityList',
   'palyer',
   'fullScreen'
  ])
 }

created() {
  console.log(this.city);
  console.log(this.cityList[1]);
  console.log(this.palyer);
  console.log(this.fullScreen);
 }

...mapActions(['selectList'])

this.selectList({
 list: this.citys,
 index: 1
});