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 中的状态的唯一方法是提交 mutationVuex 中的 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;
- }
- };
- // 导出 mutation
- export
- default mutations;
2.4 getters.js 有时候我们需要从 store 中的 state 中派生出一些状态
mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性
- /*
- * 有时候我们需要从 store 中的 state 中派生出一些状态
- * 这里的常量主要是对 state 里面做一些映射
- * mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性
- */
- // 对 state 里面的属性做一些映射
- export const city = state => state.city; // 箭头函数的简写
- export const cityList = state => state.cityList;
- export const fullScreen = state => state.fullScreen;
- export const palyer = state => state.palyer;
- 2.5 actions.js
Action 类似于 mutation, 不同在于:
Action 提交的是 mutation, 而不是直接变更状态
Action 可以包含任意异步操作
在一个动作中多次改变 mutation 可以封装一个 action
- /*
- * actions 类似 mutation
- * 区别:
- * 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);
- };
2.6 index.js 入口
- /*
- * 入口
- */
- import Vue from 'vue';
- import Vuex from 'vuex';
- // import * as obj from 'xxxx'; 会将 xxxx 中所有 export 导出的内容组合成一个对象返回
- 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()] : []
- });
3 使用
3.1 在 mian.js 注册 store
在 main.js 里面 new 的 Vue 的实例里面注册 store
3.2 写入值, 要在组件中引入 mapMutations 的语法糖
引入语法糖
import {mapMutations, mapActions} from 'vuex';
在 methods 里面 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用
- ...mapMutations({
- // 这里和 mutation 里面的常量做一个映射
- setCity: 'SET_CITY'
- })
在需要的地方写入值
this.setCity(city);
3.3 获取值
获得 vuex 中的值, 要在组件中引入 mapGetters(mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性)
引入 mapGetters
import {mapGetters} from 'vuex';
在 computed 计算属性里面使用对象展开运算符将 getters 混入 computed 对象中
- 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);
- }
3.4 action 存入值
...mapActions(['selectList'])
在需要存入的地方使用
- this.selectList({
- list: this.citys,
- index: 1
- });
来源: https://segmentfault.com/a/1190000013656746