/** 是vuex的單一狀態(tài)數(shù)，用一個對象就包含了全部的應(yīng)用層級狀態(tài)* 單一狀態(tài)樹讓我們能夠直接地定位任一特定的狀態(tài)片段，在調(diào)試的過程中也能輕易地取得整個當(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 非常類似于事件：每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調(diào)函數(shù) (handler)。這個回調(diào)函數(shù)就是我們實際進行狀態(tài)更改的地方，并且它會接受 state 作為第一個參數(shù) */// 導(dǎo)入mutation-type.js里面所有的常量import * as types from './mutation-types';// 定義一個mutation可以供設(shè)置和修改值const mutations = { /* * 1 表達式作為屬性表達式放在方括號之內(nèi) * 2 形參state （獲取當(dāng)前狀態(tài)樹的state） * 3 形參city，是提交mutation時傳的參數(shù) * 4 使用mutation便于書寫方便 * 5 這個操作相當(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)出mutationexport default mutations;

/** 有時候我們需要從 store 中的 state 中派生出一些狀態(tài)* 這里的常量主要是對state里面做一些映射* mapGetters 輔助函數(shù)僅僅是將 store 中的 getters 映射到局部計算屬性*/// 對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：在一個動作中多次改變mutation可以封裝一個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)容組合成一個對象返回。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里面的常量做一個映射 setCity: 'SET_CITY'})

this.setCity(city);

import {mapGetters} from 'vuex';

computed: {  // 這里面的city映射的是state.js里面的city  // 可以映射多個值  ...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});