這章節我準備以requirejs
模塊化,講解下如何快速上手vuex
javascript
源碼地址 css
工程代碼結構以下html
|--src |----api |----assets |----component |----lib |----vuex |----config.js |----main.js |----require.js |--index.html
目錄文件 | 說明 |
---|---|
src | 存放全部源碼 |
api | 數據處理接口 |
assets | 一些資源文件css, images ,js等 |
components | 存放vue組件 |
lib | 依賴包 vuex vuex-resource lodash 等 |
vuex | vuex文件詳細看上一節點我 |
config.js | requirejs配置文件 |
main.js | 主入口文件 |
requirejs
並加載依賴css<link rel="stylesheet" href="src/assets/js/bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="src/assets/css/md-facefont.css"> <link rel="stylesheet" href="src/assets/js/bootstrap-material-design/css/bootstrap-material-design.css"> <link rel="stylesheet" href="src/assets/js/bootstrap-material-design/css/ripples.min.css"> <script src="src/require.js" data-main="src/config.js" ></script>
這裏加入jquery
,vue
,vue-resource
,vuex
, lodash
,bootstrap-material-design
bootstrap-material-design
前端
自己依賴jquery
和bootstrap
配置好shim
,以後require
咱們的main.js
vue
require.config({ baseUrl : "./src", paths :{ jquery:"./lib/jquery.min", vue:"./lib/vue", vueResource:"./lib/vue-resource.min", vueX:"./lib/vuex", api :"./api/index", lodash : "./lib/lodash.min", bootstrap : "./assets/js/bootstrap/js/bootstrap.min", ripples : "./assets/js/bootstrap-material-design/js/ripples.min", material:"./assets/js/bootstrap-material-design/js/material.min" }, shim : { bootstrap : ['jquery'], ripples:['jquery'], material:['jquery'], }, packages: [ { name: 'components', location: 'component', main: 'components' }, { name : "vuex", location :"vuex", main : "vuex" } ] }) require(["./main"])
引入依賴包,咱們寫的App.js 和vuex的store
對象.java
建立vue對象 並 加載vuex的store
掛到body上 ready後初始化咱們的bootstrap-material-design
jquery
define(function(require){ var Vue = require("vue"); var store = require("vuex/store") var app = require("component/App") var $ = require("jquery"); require("bootstrap") require("ripples") require("material") Vue.config.debug = true; Vue.config.devtools = true; new Vue({ el : "body", store: store, ready: function(){ $.material.init(); }, components:{ App: app } }); });
vuex/store.js 這裏同時加載咱們的多個業務state
(search,searchGroup),git
vuex
在實例化的時候會合並咱們定義的modules 進而完成模塊化的需求es6
define(function(require){ var Vue = require("vue"); var Vuex = require("vueX"); var search = require("vuex/modules/search"); var searchGroup = require("vuex/modules/searchGroup"); Vue.use(Vuex) Vue.config.debug = true; return new Vuex.Store({ modules: { search : search, searchGroup :searchGroup }, strict: true, middlewares: [Vuex.createLogger] }) });
vuex/mutation-types.js 以search組件爲說明 咱們須要3個動做操做分別是以下github
SET_SEARCH_LIST
設置須要顯示的結果數組
UPDATE_SEARCH_VAL
更新查詢值
CLEAR_SEARCH_VAL
清空咱們的查詢值
定義好類型後 在mutations
和actions
裏使用
{ SET_SEARCH_LIST : "SET_SEARCH_LIST", UPDATE_SEARCH_VAL : "UPDATE_SEARCH_VAL", CLEAR_SEARCH_VAL : "CLEAR_SEARCH_VAL", }
這裏以vuex/modules/search.js爲例
咱們定義個state
包括2個屬性searchKey
和searchResultList
分別配置 操做類型變化的state
處理。
最後返回咱們的state
和mutations
以官網API中表示,mutation
必須是同步函數 因此異步操做盡可能在actions
裏處理
define(function(require){ var types = require("vuex/mutation-types"); var state = { // 查詢條件 searchKey : "", // 查詢結果 searchResultList : [] } // mutations var mutations = {} mutations[types.SET_SEARCH_LIST] = function(state,list) { state.searchResultList = list; } mutations[types.UPDATE_SEARCH_VAL] = function(state , key) { state.searchKey = key ; } mutations[types.CLEAR_SEARCH_VAL] = function(state ) { state.searchKey = ""; state.searchResultList = []; } return { state : state, mutations : mutations } });
這裏定義也是對應3個操做
清空查詢項
更新查詢項
獲取查詢結果集合
clearSearchKey
方法中
獲取store
使用store.dispatch(對應types) 觸發變化mutation
(若是參數能夠在第二個參數後面加 最新版本也能夠直接對象形式傳參數)
define(function(require){ var api = require("api"); var types = require("vuex/mutation-types") var actions = { // clear 查詢項 clearSearchKey : function(store){ store.dispatch(types.CLEAR_SEARCH_VAL) }, // 更新查詢項 updateSearchKey : function(store , key){ store.dispatch(types.UPDATE_SEARCH_VAL,key); }, // 查詢結果集合 searchParamList : function(store , group ,key){ var result = api.searchParamList({ type:group, key:key }); if(result.data){ store.dispatch(types.SET_SEARCH_LIST,result.data); } } } return actions; })
折騰了這麼多 終於能夠寫組件了 - -!以component/Search.js
爲說明
咱們引用searchGroup
組件 ,vuex
的actions
再組件中建立vuex
對象
在組件中配置getters來接收store的state
例如
searchKey
咱們引用了vuex/modules/search
中的state
對象中的searchKey
這裏咱們只是只讀不去修改
配置methods來接受vuex/actions
裏的操做方法
最後編寫咱們其餘代碼 完成search.js的建立
var Vue = require("vue"); var SearchGroup = require("component/SearchGroup"); var actions = require("vuex/actions") var getters = require("vuex/getters"); return Vue.extend({ vuex :{ getters : { searchGroupItem: function(store){ return store.searchGroup.searchGroupItem }, searchGroup:function(store){ return store.searchGroup.searchGroup }, searchKey : function(store){ return store.search.searchKey }, isEmptySearchKey : getters.isEmptySearchKey }, actions: { searchParamList:actions.searchParamList , clearSearchKey:actions.clearSearchKey, updateSearchKey:actions.updateSearchKey } }, methods : { clearAction:function(){ this.clearSearchKey() }, searchAction:function(e){ if(this.searchKey.length){ this.searchParamList(this.searchGroup,this.searchKey) } }, update:function(e){ this.updateSearchKey(e.target.value) } }, template : "#search-template", components:{ searchGroup:SearchGroup } });
通過以上步驟完成一個search
組件在vuex
的框架體系中的建立流程,固然步驟其實挺麻煩的 還有不少細節和方法沒點到 還請見諒。
我的水平有限 只能BB到這裏 結合本文能夠去看es6的版本。
說下vuex下組件的一個總體流程
search.js中觸發一個
methodA
methodA
觸發(getter --> ActionsmethodA
)
methodA
經過vuex.actions裏 Actions store.dispatch(types.METHODA)vuex.modules.search配置的
mutations[types.METHODA]
進行state的操做state改變某個狀態A 響應到search.js中屬性a (getter --> a = search.A)
做者
yelingfeng
相關連接
特別感謝jackblog-vue
專業技術羣分享 |
---|
Vuejs 364912432 |
Angularjs 238251402 |
React 530415177 |
Nodejs 422910907 |
PHP高級開發 132984819 |
JAVA高級開發 145381037 |
移動微信前端開發 148257606 |