vuex入门实例2

vuex入门实例2

这章节我准备以requirejs模块化,讲解下如何快速上手vuex

源码地址

工程代码结构如下

 |--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.js

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对象.

创建vue对象 并 加载vuex的store 挂到body上 ready后初始化我们的bootstrap-material-design

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),

vuex在实例化的时候会合并我们定义的modules 进而完成模块化的需求

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个动作操作分别是如下

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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,560评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,104评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,297评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,869评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,275评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,563评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,833评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,543评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,245评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,359评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,006评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2 273
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2 268

推荐阅读更多精彩内容