详解vuex的简单使用

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 中派生出一些状态。