vuex入门实例(2/3)

时间  2019-11-07
标签 vuex 入门 实例 繁體版
原文   原文链接

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 前端

自己依赖jquery和bootstrap配置好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 清空咱们的查询值

定义好类型后 在mutations和actions里使用

{
    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个属性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
    }
});

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组件 ,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下组件的一个总体流程

  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
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程