1 目錄的配置

根據官方推薦在src目錄里面創建store目錄

2 創建store里面的文件

根據官方推薦創建 actions.js, getters.js,index.js, mutations.js, mutations-types.js, state.js

2.1 state.js

state.js: 是vuex的單一狀態數，用一個對象就包含了全部的應用層級狀態。至此它便作為一個『唯一數據源(SSOT)』而存在。這也意味著，每個應用將僅僅包含一個 store 實例。單一狀態樹讓我們能夠直接地定位任一特定的狀態片段，在調試的過程中也能輕易地取得整個當前應用狀態的快照。（用來管理所有vuex狀態數據）

/** 是vuex的單一狀態數，用一個對象就包含了全部的應用層級狀態* 單一狀態樹讓我們能夠直接地定位任一特定的狀態片段，在調試的過程中也能輕易地取得整個當前應用狀態的快照。（用來管理所有vuex狀態數據）**/const state = { // 城市狀態，用來管理城市 city: {}, cityList: [], fullScreen: true, palyer: false};export default state;

2.2 mutations-types.js 存取mutations相關的字符常量 (一些常量)

/** 存取mutations相關的字符常量**/// 定義常量并導出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';

2.3 mutations.js （定義修改的操作）

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

/* * 更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation * Vuex 中的 mutations 非常類似于事件：每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是我們實際進行狀態更改的地方，并且它會接受 state 作為第一個參數 */// 導入mutation-type.js里面所有的常量import * as types from './mutation-types';// 定義一個mutation可以供設置和修改值const mutations = { /* * 1 表達式作為屬性表達式放在方括號之內 * 2 形參state （獲取當前狀態樹的state） * 3 形參city，是提交mutation時傳的參數 * 4 使用mutation便于書寫方便 * 5 這個操作相當于往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; }};// 導出mutationexport default mutations;

2.4 getters.js 有時候我們需要從 store 中的 state 中派生出一些狀態。