vuex入門實例(2/3)

vuex入門實例2

這章節我準備以requirejs模塊化,講解下如何快速上手vuexjavascript

源碼地址 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 主入口文件

1. 建立index.html 引入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>

2. 建立config.js 配置環境依賴

這裏加入jquery,vue ,vue-resource,vuex , lodash,bootstrap-material-design
bootstrap-material-design 前端

自己依賴jquerybootstrap配置好shim,以後require咱們的main.jsvue

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"])

3. 建立main.js

引入依賴包,咱們寫的App.js 和vuex的store對象.java

建立vue對象 並 加載vuex的store 掛到body上 ready後初始化咱們的bootstrap-material-designjquery

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
        }
    });
});

4. 建立咱們應用的狀態管理

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]
      })
});

5. 建立操做類型Types

vuex/mutation-types.js 以search組件爲說明 咱們須要3個動做操做分別是以下github

SET_SEARCH_LIST 設置須要顯示的結果數組

UPDATE_SEARCH_VAL 更新查詢值

CLEAR_SEARCH_VAL 清空咱們的查詢值

定義好類型後 在mutationsactions裏使用

{
    SET_SEARCH_LIST : "SET_SEARCH_LIST",
    UPDATE_SEARCH_VAL : "UPDATE_SEARCH_VAL",
    CLEAR_SEARCH_VAL : "CLEAR_SEARCH_VAL",
   }

6.建立業務模塊modules

這裏以vuex/modules/search.js爲例

咱們定義個state 包括2個屬性searchKeysearchResultList

分別配置 操做類型變化的state處理。

最後返回咱們的statemutations

以官網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
    }
});

6. 建立動做actions

這裏定義也是對應3個操做

清空查詢項
更新查詢項
獲取查詢結果集合

clearSearchKey 方法中

  1. 獲取store

  2. 使用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;
})

7. 建立業務組件

折騰了這麼多 終於能夠寫組件了 - -!以component/Search.js爲說明

咱們引用searchGroup組件 ,vuexactions 再組件中建立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下組件的一個總體流程

  1. search.js中觸發一個methodA

  2. methodA觸發(getter --> Actions methodA)

  3. methodA 經過vuex.actions裏 Actions store.dispatch(types.METHODA)

  4. vuex.modules.search配置的mutations[types.METHODA] 進行state的操做

  5. state改變某個狀態A 響應到search.js中屬性a (getter --> a = search.A)


做者
yelingfeng

相關連接

vuejs
vuex
requirejs

特別感謝jackblog-vue

jackblog-vue

專業技術羣分享
Vuejs 364912432
Angularjs 238251402
React 530415177
Nodejs 422910907
PHP高級開發 132984819
JAVA高級開發 145381037
移動微信前端開發 148257606
相關文章
相關標籤/搜索