基本概念:
vuex 是一个专为 vue.js 应用程序开发的状态管理模式它采用集中式存储管理应用的所有组件的状态, 并以相应的规则保证状态以一种可预测的方式发生变化
目录结构:
Vuex 并不限制你的代码结构但是, 它规定了一些需要遵守的规则:
应用层级的状态应该集中到单个 store 对象中
提交 mutation 是更改状态的唯一方法, 并且这个过程是同步的
异步逻辑都应该封装到 action 里面
只要你遵守以上规则, 如何组织代码随你便如果你的 store 文件太大, 只需将 actionmutation 和 getter 分割到单独的文件
使用举例:
需求: 点击歌手 (singer.vue 中) 加载歌手详情信息(singer-detail.vue)
技术分析: 需要将歌手信息传递到歌手详情页
实现方法: 可通过参数传入, props 接收; 也通过 Vuex 传递数据(本 demo 选择)
本人 Vuex 相关的目录结构:
目录结构解释:
- index.js(入口文件)
- action.js(异步操作 / 提交 mutation)
- state.js(状态管理对象)
- getters.js(对 state.js 进行映射)
- mutations.js(mutation)
- mutation-types.js(mutation 常量)(使用常量替代 Mutation 事件类型, 简化写法, 参考官网)
源码及关键代码解释:
- actions.js(由于本 demo 中并未使用异步操作, 因此不含无需使用 actions)
- mutation-types.js
- /**
- * Created by xiaoqiang on 21/12/2017.
- */
- export const SET_SINGER = 'SET_SINGER'
- mutations.js
- /**
- * Created by xiaoqiang on 21/12/2017.
- */
- import * as types from './mutation-types'
- const mutations = {
- [types.SET_SINGER](state, singer) {
- state.singer = singer
- }
- }
- export default mutations
- state.js
- /**
- * Created by xiaoqiang on 21/12/2017.
- */
- const state = {
- singer: {}
- }
- export default state
- getter.js
- /**
- * Created by xiaoqiang on 21/12/2017.
- */
- export const singer = state => state.singer
- index.js
- /**
- * Created by xiaoqiang on 21/12/2017.
- */
- import Vue from 'vue'
- import Vuex from 'vuex'
- import * as actions from './actions'
- import * as getters from './getters'
- import state from './state'
- import mutations from './mutations'
- // 用于检测组件状态(打印日志信息)
- import createLogger from 'vuex/dist/logger'
- Vue.use(Vuex)
- // 控制严格模式和 plugins 只在开发模式下生效
- const debug = process.env.NODE_ENV !== 'production'
- // 初始化 Store
- export default new Vuex.Store({
- actions,
- getters,
- state,
- mutations,
- strict: debug,
- plugins: debug ? [createLogger()] : []
- })
将 Store 注入 Vue 中:
singer.vue 相关代码详解:
singer-detail.vue 中相关代码详解:
Vuex 原理:
之所以将原理图放在这里, 是因为结合代码, 现在再看原理图就比较容易理解了:
运行结果:
点击 singer.vue 中的歌手, 跳转至 singer-detail.vue 后的运行结果:
第一次点击 prev state 中的 singer 会是一个空对象
返回后再次点击, createLogger 插件会输出前一次数据以及当前一次数据值, 记录数据变化
来源: http://blog.csdn.net/fabulous1111/article/details/78860954