Vue2.x中vuex的使用方法及应用时的项目文件结构设计以完整demo实例解释
基本概念：
Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。
目錄結構：
Vuex 并不限制你的代碼結構。但是，它規定了一些需要遵守的規則：
應用層級的狀態應該集中到單個 store 對象中。
提交?mutation?是更改狀態的唯一方法，并且這個過程是同步的。
異步邏輯都應該封裝到?action?里面。
只要你遵守以上規則，如何組織代碼隨你便。如果你的 store 文件太大，只需將 action、mutation 和 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
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插件會輸出前一次數據以及當前一次數據值，記錄數據變化。
總結
以上是生活随笔為你收集整理的Vue2.x中vuex的使用方法及应用时的项目文件结构设计以完整demo实例解释的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 安徽两高校合办智能网联新能源汽车创新班，
- 下一篇： Vue2.0中子组件向父组件传递数据的方