├── component.html ├── font ├── iconfont.css ├── iconfont.eot ├── iconfont.svg ├── iconfont.ttf └── iconfont.woff ├── index.html ├── index2.html ├── index3.html ├── lib ├── mock.js ├── vue.js └── vuex.js └── readme.md /component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 |

{{data}}

13 |
    14 |
  1. {{x}}
    2. 15 |
16 | 17 |
18 | 19 | 20 |
21 | 22 | 30 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /font/iconfont.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "iconfont"; 3 | src: url('iconfont.eot?t=1499842999897'); /* IE9*/ 4 | src: url('iconfont.eot?t=1499842999897#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('iconfont.woff?t=1499842999897') format('woff'), /* chrome, firefox */ 6 | url('iconfont.ttf?t=1499842999897') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 7 | url('iconfont.svg?t=1499842999897#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family:"iconfont" !important; 12 | font-size:16px; 13 | font-style:normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-down:before { content: "\e600"; } 19 | 20 | .icon-up:before { content: "\e61b"; } 21 | 22 | -------------------------------------------------------------------------------- /font/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JackCrysler/vue-start/85237db5331ac7dd3efb07888fb512c485f5c608/font/iconfont.eot -------------------------------------------------------------------------------- /font/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Created by FontForge 20120731 at Wed Jul 12 15:03:19 2017 6 | By admin 7 | 8 | 9 | 10 | 24 | 26 | 28 | 30 | 32 | 34 | 38 | 40 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /font/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JackCrysler/vue-start/85237db5331ac7dd3efb07888fb512c485f5c608/font/iconfont.ttf -------------------------------------------------------------------------------- /font/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JackCrysler/vue-start/85237db5331ac7dd3efb07888fb512c485f5c608/font/iconfont.woff -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 | 13 | 14 | 53 | 54 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |

{{txt}}

16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
序号姓名年龄性别证件号码
{{i.id}}{{i.name}}{{i.age}}{{i.gender}}{{i.idCard}}
37 | 38 |
39 | 40 | 41 | 42 | 95 | 96 | -------------------------------------------------------------------------------- /index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 |
22 | 23 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /lib/vuex.js: -------------------------------------------------------------------------------- 1 | /** 2 | * vuex v2.3.0 3 | * (c) 2017 Evan You 4 | * @license MIT 5 | */ 6 | (function (global, factory) { 7 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : 8 | typeof define === 'function' && define.amd ? define(factory) : 9 | (global.Vuex = factory()); 10 | }(this, (function () { 'use strict'; 11 | 12 | var applyMixin = function (Vue) { 13 | var version = Number(Vue.version.split('.')[0]); 14 | 15 | if (version >= 2) { 16 | var usesInit = Vue.config._lifecycleHooks.indexOf('init') > -1; 17 | Vue.mixin(usesInit ? { init: vuexInit } : { beforeCreate: vuexInit }); 18 | } else { 19 | // override init and inject vuex init procedure 20 | // for 1.x backwards compatibility. 21 | var _init = Vue.prototype._init; 22 | Vue.prototype._init = function (options) { 23 | if ( options === void 0 ) options = {}; 24 | 25 | options.init = options.init 26 | ? [vuexInit].concat(options.init) 27 | : vuexInit; 28 | _init.call(this, options); 29 | }; 30 | } 31 | 32 | /** 33 | * Vuex init hook, injected into each instances init hooks list. 34 | */ 35 | 36 | function vuexInit () { 37 | var options = this.$options; 38 | // store injection 39 | if (options.store) { 40 | this.$store = options.store; 41 | } else if (options.parent && options.parent.$store) { 42 | this.$store = options.parent.$store; 43 | } 44 | } 45 | }; 46 | 47 | var devtoolHook = 48 | typeof window !== 'undefined' && 49 | window.__VUE_DEVTOOLS_GLOBAL_HOOK__; 50 | 51 | function devtoolPlugin (store) { 52 | if (!devtoolHook) { return } 53 | 54 | store._devtoolHook = devtoolHook; 55 | 56 | devtoolHook.emit('vuex:init', store); 57 | 58 | devtoolHook.on('vuex:travel-to-state', function (targetState) { 59 | store.replaceState(targetState); 60 | }); 61 | 62 | store.subscribe(function (mutation, state) { 63 | devtoolHook.emit('vuex:mutation', mutation, state); 64 | }); 65 | } 66 | 67 | /** 68 | * Get the first item that pass the test 69 | * by second argument function 70 | * 71 | * @param {Array} list 72 | * @param {Function} f 73 | * @return {*} 74 | */ 75 | /** 76 | * Deep copy the given object considering circular structure. 77 | * This function caches all nested objects and its copies. 78 | * If it detects circular structure, use cached copy to avoid infinite loop. 79 | * 80 | * @param {*} obj 81 | * @param {Array} cache 82 | * @return {*} 83 | */ 84 | 85 | 86 | /** 87 | * forEach for object 88 | */ 89 | function forEachValue (obj, fn) { 90 | Object.keys(obj).forEach(function (key) { return fn(obj[key], key); }); 91 | } 92 | 93 | function isObject (obj) { 94 | return obj !== null && typeof obj === 'object' 95 | } 96 | 97 | function isPromise (val) { 98 | return val && typeof val.then === 'function' 99 | } 100 | 101 | function assert (condition, msg) { 102 | if (!condition) { throw new Error(("[vuex] " + msg)) } 103 | } 104 | 105 | var Module = function Module (rawModule, runtime) { 106 | this.runtime = runtime; 107 | this._children = Object.create(null); 108 | this._rawModule = rawModule; 109 | var rawState = rawModule.state; 110 | this.state = (typeof rawState === 'function' ? rawState() : rawState) || {}; 111 | }; 112 | 113 | var prototypeAccessors$1 = { namespaced: {} }; 114 | 115 | prototypeAccessors$1.namespaced.get = function () { 116 | return !!this._rawModule.namespaced 117 | }; 118 | 119 | Module.prototype.addChild = function addChild (key, module) { 120 | this._children[key] = module; 121 | }; 122 | 123 | Module.prototype.removeChild = function removeChild (key) { 124 | delete this._children[key]; 125 | }; 126 | 127 | Module.prototype.getChild = function getChild (key) { 128 | return this._children[key] 129 | }; 130 | 131 | Module.prototype.update = function update (rawModule) { 132 | this._rawModule.namespaced = rawModule.namespaced; 133 | if (rawModule.actions) { 134 | this._rawModule.actions = rawModule.actions; 135 | } 136 | if (rawModule.mutations) { 137 | this._rawModule.mutations = rawModule.mutations; 138 | } 139 | if (rawModule.getters) { 140 | this._rawModule.getters = rawModule.getters; 141 | } 142 | }; 143 | 144 | Module.prototype.forEachChild = function forEachChild (fn) { 145 | forEachValue(this._children, fn); 146 | }; 147 | 148 | Module.prototype.forEachGetter = function forEachGetter (fn) { 149 | if (this._rawModule.getters) { 150 | forEachValue(this._rawModule.getters, fn); 151 | } 152 | }; 153 | 154 | Module.prototype.forEachAction = function forEachAction (fn) { 155 | if (this._rawModule.actions) { 156 | forEachValue(this._rawModule.actions, fn); 157 | } 158 | }; 159 | 160 | Module.prototype.forEachMutation = function forEachMutation (fn) { 161 | if (this._rawModule.mutations) { 162 | forEachValue(this._rawModule.mutations, fn); 163 | } 164 | }; 165 | 166 | Object.defineProperties( Module.prototype, prototypeAccessors$1 ); 167 | 168 | var ModuleCollection = function ModuleCollection (rawRootModule) { 169 | var this$1 = this; 170 | 171 | // register root module (Vuex.Store options) 172 | this.root = new Module(rawRootModule, false); 173 | 174 | // register all nested modules 175 | if (rawRootModule.modules) { 176 | forEachValue(rawRootModule.modules, function (rawModule, key) { 177 | this$1.register([key], rawModule, false); 178 | }); 179 | } 180 | }; 181 | 182 | ModuleCollection.prototype.get = function get (path) { 183 | return path.reduce(function (module, key) { 184 | return module.getChild(key) 185 | }, this.root) 186 | }; 187 | 188 | ModuleCollection.prototype.getNamespace = function getNamespace (path) { 189 | var module = this.root; 190 | return path.reduce(function (namespace, key) { 191 | module = module.getChild(key); 192 | return namespace + (module.namespaced ? key + '/' : '') 193 | }, '') 194 | }; 195 | 196 | ModuleCollection.prototype.update = function update$1 (rawRootModule) { 197 | update(this.root, rawRootModule); 198 | }; 199 | 200 | ModuleCollection.prototype.register = function register (path, rawModule, runtime) { 201 | var this$1 = this; 202 | if ( runtime === void 0 ) runtime = true; 203 | 204 | var parent = this.get(path.slice(0, -1)); 205 | var newModule = new Module(rawModule, runtime); 206 | parent.addChild(path[path.length - 1], newModule); 207 | 208 | // register nested modules 209 | if (rawModule.modules) { 210 | forEachValue(rawModule.modules, function (rawChildModule, key) { 211 | this$1.register(path.concat(key), rawChildModule, runtime); 212 | }); 213 | } 214 | }; 215 | 216 | ModuleCollection.prototype.unregister = function unregister (path) { 217 | var parent = this.get(path.slice(0, -1)); 218 | var key = path[path.length - 1]; 219 | if (!parent.getChild(key).runtime) { return } 220 | 221 | parent.removeChild(key); 222 | }; 223 | 224 | function update (targetModule, newModule) { 225 | // update target module 226 | targetModule.update(newModule); 227 | 228 | // update nested modules 229 | if (newModule.modules) { 230 | for (var key in newModule.modules) { 231 | if (!targetModule.getChild(key)) { 232 | console.warn( 233 | "[vuex] trying to add a new module '" + key + "' on hot reloading, " + 234 | 'manual reload is needed' 235 | ); 236 | return 237 | } 238 | update(targetModule.getChild(key), newModule.modules[key]); 239 | } 240 | } 241 | } 242 | 243 | var Vue; // bind on install 244 | 245 | var Store = function Store (options) { 246 | var this$1 = this; 247 | if ( options === void 0 ) options = {}; 248 | 249 | assert(Vue, "must call Vue.use(Vuex) before creating a store instance."); 250 | assert(typeof Promise !== 'undefined', "vuex requires a Promise polyfill in this browser."); 251 | 252 | var state = options.state; if ( state === void 0 ) state = {}; 253 | var plugins = options.plugins; if ( plugins === void 0 ) plugins = []; 254 | var strict = options.strict; if ( strict === void 0 ) strict = false; 255 | 256 | // store internal state 257 | this._committing = false; 258 | this._actions = Object.create(null); 259 | this._mutations = Object.create(null); 260 | this._wrappedGetters = Object.create(null); 261 | this._modules = new ModuleCollection(options); 262 | this._modulesNamespaceMap = Object.create(null); 263 | this._subscribers = []; 264 | this._watcherVM = new Vue(); 265 | 266 | // bind commit and dispatch to self 267 | var store = this; 268 | var ref = this; 269 | var dispatch = ref.dispatch; 270 | var commit = ref.commit; 271 | this.dispatch = function boundDispatch (type, payload) { 272 | return dispatch.call(store, type, payload) 273 | }; 274 | this.commit = function boundCommit (type, payload, options) { 275 | return commit.call(store, type, payload, options) 276 | }; 277 | 278 | // strict mode 279 | this.strict = strict; 280 | 281 | // init root module. 282 | // this also recursively registers all sub-modules 283 | // and collects all module getters inside this._wrappedGetters 284 | installModule(this, state, [], this._modules.root); 285 | 286 | // initialize the store vm, which is responsible for the reactivity 287 | // (also registers _wrappedGetters as computed properties) 288 | resetStoreVM(this, state); 289 | 290 | // apply plugins 291 | plugins.concat(devtoolPlugin).forEach(function (plugin) { return plugin(this$1); }); 292 | }; 293 | 294 | var prototypeAccessors = { state: {} }; 295 | 296 | prototypeAccessors.state.get = function () { 297 | return this._vm._data.$$state 298 | }; 299 | 300 | prototypeAccessors.state.set = function (v) { 301 | assert(false, "Use store.replaceState() to explicit replace store state."); 302 | }; 303 | 304 | Store.prototype.commit = function commit (_type, _payload, _options) { 305 | var this$1 = this; 306 | 307 | // check object-style commit 308 | var ref = unifyObjectStyle(_type, _payload, _options); 309 | var type = ref.type; 310 | var payload = ref.payload; 311 | var options = ref.options; 312 | 313 | var mutation = { type: type, payload: payload }; 314 | var entry = this._mutations[type]; 315 | if (!entry) { 316 | console.error(("[vuex] unknown mutation type: " + type)); 317 | return 318 | } 319 | this._withCommit(function () { 320 | entry.forEach(function commitIterator (handler) { 321 | handler(payload); 322 | }); 323 | }); 324 | this._subscribers.forEach(function (sub) { return sub(mutation, this$1.state); }); 325 | 326 | if (options && options.silent) { 327 | console.warn( 328 | "[vuex] mutation type: " + type + ". Silent option has been removed. " + 329 | 'Use the filter functionality in the vue-devtools' 330 | ); 331 | } 332 | }; 333 | 334 | Store.prototype.dispatch = function dispatch (_type, _payload) { 335 | // check object-style dispatch 336 | var ref = unifyObjectStyle(_type, _payload); 337 | var type = ref.type; 338 | var payload = ref.payload; 339 | 340 | var entry = this._actions[type]; 341 | if (!entry) { 342 | console.error(("[vuex] unknown action type: " + type)); 343 | return 344 | } 345 | return entry.length > 1 346 | ? Promise.all(entry.map(function (handler) { return handler(payload); })) 347 | : entry[0](payload) 348 | }; 349 | 350 | Store.prototype.subscribe = function subscribe (fn) { 351 | var subs = this._subscribers; 352 | if (subs.indexOf(fn) < 0) { 353 | subs.push(fn); 354 | } 355 | return function () { 356 | var i = subs.indexOf(fn); 357 | if (i > -1) { 358 | subs.splice(i, 1); 359 | } 360 | } 361 | }; 362 | 363 | Store.prototype.watch = function watch (getter, cb, options) { 364 | var this$1 = this; 365 | 366 | assert(typeof getter === 'function', "store.watch only accepts a function."); 367 | return this._watcherVM.$watch(function () { return getter(this$1.state, this$1.getters); }, cb, options) 368 | }; 369 | 370 | Store.prototype.replaceState = function replaceState (state) { 371 | var this$1 = this; 372 | 373 | this._withCommit(function () { 374 | this$1._vm._data.$$state = state; 375 | }); 376 | }; 377 | 378 | Store.prototype.registerModule = function registerModule (path, rawModule) { 379 | if (typeof path === 'string') { path = [path]; } 380 | assert(Array.isArray(path), "module path must be a string or an Array."); 381 | this._modules.register(path, rawModule); 382 | installModule(this, this.state, path, this._modules.get(path)); 383 | // reset store to update getters... 384 | resetStoreVM(this, this.state); 385 | }; 386 | 387 | Store.prototype.unregisterModule = function unregisterModule (path) { 388 | var this$1 = this; 389 | 390 | if (typeof path === 'string') { path = [path]; } 391 | assert(Array.isArray(path), "module path must be a string or an Array."); 392 | this._modules.unregister(path); 393 | this._withCommit(function () { 394 | var parentState = getNestedState(this$1.state, path.slice(0, -1)); 395 | Vue.delete(parentState, path[path.length - 1]); 396 | }); 397 | resetStore(this); 398 | }; 399 | 400 | Store.prototype.hotUpdate = function hotUpdate (newOptions) { 401 | this._modules.update(newOptions); 402 | resetStore(this, true); 403 | }; 404 | 405 | Store.prototype._withCommit = function _withCommit (fn) { 406 | var committing = this._committing; 407 | this._committing = true; 408 | fn(); 409 | this._committing = committing; 410 | }; 411 | 412 | Object.defineProperties( Store.prototype, prototypeAccessors ); 413 | 414 | function resetStore (store, hot) { 415 | store._actions = Object.create(null); 416 | store._mutations = Object.create(null); 417 | store._wrappedGetters = Object.create(null); 418 | store._modulesNamespaceMap = Object.create(null); 419 | var state = store.state; 420 | // init all modules 421 | installModule(store, state, [], store._modules.root, true); 422 | // reset vm 423 | resetStoreVM(store, state, hot); 424 | } 425 | 426 | function resetStoreVM (store, state, hot) { 427 | var oldVm = store._vm; 428 | 429 | // bind store public getters 430 | store.getters = {}; 431 | var wrappedGetters = store._wrappedGetters; 432 | var computed = {}; 433 | forEachValue(wrappedGetters, function (fn, key) { 434 | // use computed to leverage its lazy-caching mechanism 435 | computed[key] = function () { return fn(store); }; 436 | Object.defineProperty(store.getters, key, { 437 | get: function () { return store._vm[key]; }, 438 | enumerable: true // for local getters 439 | }); 440 | }); 441 | 442 | // use a Vue instance to store the state tree 443 | // suppress warnings just in case the user has added 444 | // some funky global mixins 445 | var silent = Vue.config.silent; 446 | Vue.config.silent = true; 447 | store._vm = new Vue({ 448 | data: { 449 | $$state: state 450 | }, 451 | computed: computed 452 | }); 453 | Vue.config.silent = silent; 454 | 455 | // enable strict mode for new vm 456 | if (store.strict) { 457 | enableStrictMode(store); 458 | } 459 | 460 | if (oldVm) { 461 | if (hot) { 462 | // dispatch changes in all subscribed watchers 463 | // to force getter re-evaluation for hot reloading. 464 | store._withCommit(function () { 465 | oldVm._data.$$state = null; 466 | }); 467 | } 468 | Vue.nextTick(function () { return oldVm.$destroy(); }); 469 | } 470 | } 471 | 472 | function installModule (store, rootState, path, module, hot) { 473 | var isRoot = !path.length; 474 | var namespace = store._modules.getNamespace(path); 475 | 476 | // register in namespace map 477 | if (module.namespaced) { 478 | store._modulesNamespaceMap[namespace] = module; 479 | } 480 | 481 | // set state 482 | if (!isRoot && !hot) { 483 | var parentState = getNestedState(rootState, path.slice(0, -1)); 484 | var moduleName = path[path.length - 1]; 485 | store._withCommit(function () { 486 | Vue.set(parentState, moduleName, module.state); 487 | }); 488 | } 489 | 490 | var local = module.context = makeLocalContext(store, namespace, path); 491 | 492 | module.forEachMutation(function (mutation, key) { 493 | var namespacedType = namespace + key; 494 | registerMutation(store, namespacedType, mutation, local); 495 | }); 496 | 497 | module.forEachAction(function (action, key) { 498 | var namespacedType = namespace + key; 499 | registerAction(store, namespacedType, action, local); 500 | }); 501 | 502 | module.forEachGetter(function (getter, key) { 503 | var namespacedType = namespace + key; 504 | registerGetter(store, namespacedType, getter, local); 505 | }); 506 | 507 | module.forEachChild(function (child, key) { 508 | installModule(store, rootState, path.concat(key), child, hot); 509 | }); 510 | } 511 | 512 | /** 513 | * make localized dispatch, commit, getters and state 514 | * if there is no namespace, just use root ones 515 | */ 516 | function makeLocalContext (store, namespace, path) { 517 | var noNamespace = namespace === ''; 518 | 519 | var local = { 520 | dispatch: noNamespace ? store.dispatch : function (_type, _payload, _options) { 521 | var args = unifyObjectStyle(_type, _payload, _options); 522 | var payload = args.payload; 523 | var options = args.options; 524 | var type = args.type; 525 | 526 | if (!options || !options.root) { 527 | type = namespace + type; 528 | if (!store._actions[type]) { 529 | console.error(("[vuex] unknown local action type: " + (args.type) + ", global type: " + type)); 530 | return 531 | } 532 | } 533 | 534 | return store.dispatch(type, payload) 535 | }, 536 | 537 | commit: noNamespace ? store.commit : function (_type, _payload, _options) { 538 | var args = unifyObjectStyle(_type, _payload, _options); 539 | var payload = args.payload; 540 | var options = args.options; 541 | var type = args.type; 542 | 543 | if (!options || !options.root) { 544 | type = namespace + type; 545 | if (!store._mutations[type]) { 546 | console.error(("[vuex] unknown local mutation type: " + (args.type) + ", global type: " + type)); 547 | return 548 | } 549 | } 550 | 551 | store.commit(type, payload, options); 552 | } 553 | }; 554 | 555 | // getters and state object must be gotten lazily 556 | // because they will be changed by vm update 557 | Object.defineProperties(local, { 558 | getters: { 559 | get: noNamespace 560 | ? function () { return store.getters; } 561 | : function () { return makeLocalGetters(store, namespace); } 562 | }, 563 | state: { 564 | get: function () { return getNestedState(store.state, path); } 565 | } 566 | }); 567 | 568 | return local 569 | } 570 | 571 | function makeLocalGetters (store, namespace) { 572 | var gettersProxy = {}; 573 | 574 | var splitPos = namespace.length; 575 | Object.keys(store.getters).forEach(function (type) { 576 | // skip if the target getter is not match this namespace 577 | if (type.slice(0, splitPos) !== namespace) { return } 578 | 579 | // extract local getter type 580 | var localType = type.slice(splitPos); 581 | 582 | // Add a port to the getters proxy. 583 | // Define as getter property because 584 | // we do not want to evaluate the getters in this time. 585 | Object.defineProperty(gettersProxy, localType, { 586 | get: function () { return store.getters[type]; }, 587 | enumerable: true 588 | }); 589 | }); 590 | 591 | return gettersProxy 592 | } 593 | 594 | function registerMutation (store, type, handler, local) { 595 | var entry = store._mutations[type] || (store._mutations[type] = []); 596 | entry.push(function wrappedMutationHandler (payload) { 597 | handler(local.state, payload); 598 | }); 599 | } 600 | 601 | function registerAction (store, type, handler, local) { 602 | var entry = store._actions[type] || (store._actions[type] = []); 603 | entry.push(function wrappedActionHandler (payload, cb) { 604 | var res = handler({ 605 | dispatch: local.dispatch, 606 | commit: local.commit, 607 | getters: local.getters, 608 | state: local.state, 609 | rootGetters: store.getters, 610 | rootState: store.state 611 | }, payload, cb); 612 | if (!isPromise(res)) { 613 | res = Promise.resolve(res); 614 | } 615 | if (store._devtoolHook) { 616 | return res.catch(function (err) { 617 | store._devtoolHook.emit('vuex:error', err); 618 | throw err 619 | }) 620 | } else { 621 | return res 622 | } 623 | }); 624 | } 625 | 626 | function registerGetter (store, type, rawGetter, local) { 627 | if (store._wrappedGetters[type]) { 628 | console.error(("[vuex] duplicate getter key: " + type)); 629 | return 630 | } 631 | store._wrappedGetters[type] = function wrappedGetter (store) { 632 | return rawGetter( 633 | local.state, // local state 634 | local.getters, // local getters 635 | store.state, // root state 636 | store.getters // root getters 637 | ) 638 | }; 639 | } 640 | 641 | function enableStrictMode (store) { 642 | store._vm.$watch(function () { return this._data.$$state }, function () { 643 | assert(store._committing, "Do not mutate vuex store state outside mutation handlers."); 644 | }, { deep: true, sync: true }); 645 | } 646 | 647 | function getNestedState (state, path) { 648 | return path.length 649 | ? path.reduce(function (state, key) { return state[key]; }, state) 650 | : state 651 | } 652 | 653 | function unifyObjectStyle (type, payload, options) { 654 | if (isObject(type) && type.type) { 655 | options = payload; 656 | payload = type; 657 | type = type.type; 658 | } 659 | 660 | assert(typeof type === 'string', ("Expects string as the type, but found " + (typeof type) + ".")); 661 | 662 | return { type: type, payload: payload, options: options } 663 | } 664 | 665 | function install (_Vue) { 666 | if (Vue) { 667 | console.error( 668 | '[vuex] already installed. Vue.use(Vuex) should be called only once.' 669 | ); 670 | return 671 | } 672 | Vue = _Vue; 673 | applyMixin(Vue); 674 | } 675 | 676 | // auto install in dist mode 677 | if (typeof window !== 'undefined' && window.Vue) { 678 | install(window.Vue); 679 | } 680 | 681 | var mapState = normalizeNamespace(function (namespace, states) { 682 | var res = {}; 683 | normalizeMap(states).forEach(function (ref) { 684 | var key = ref.key; 685 | var val = ref.val; 686 | 687 | res[key] = function mappedState () { 688 | var state = this.$store.state; 689 | var getters = this.$store.getters; 690 | if (namespace) { 691 | var module = getModuleByNamespace(this.$store, 'mapState', namespace); 692 | if (!module) { 693 | return 694 | } 695 | state = module.context.state; 696 | getters = module.context.getters; 697 | } 698 | return typeof val === 'function' 699 | ? val.call(this, state, getters) 700 | : state[val] 701 | }; 702 | // mark vuex getter for devtools 703 | res[key].vuex = true; 704 | }); 705 | return res 706 | }); 707 | 708 | var mapMutations = normalizeNamespace(function (namespace, mutations) { 709 | var res = {}; 710 | normalizeMap(mutations).forEach(function (ref) { 711 | var key = ref.key; 712 | var val = ref.val; 713 | 714 | val = namespace + val; 715 | res[key] = function mappedMutation () { 716 | var args = [], len = arguments.length; 717 | while ( len-- ) args[ len ] = arguments[ len ]; 718 | 719 | if (namespace && !getModuleByNamespace(this.$store, 'mapMutations', namespace)) { 720 | return 721 | } 722 | return this.$store.commit.apply(this.$store, [val].concat(args)) 723 | }; 724 | }); 725 | return res 726 | }); 727 | 728 | var mapGetters = normalizeNamespace(function (namespace, getters) { 729 | var res = {}; 730 | normalizeMap(getters).forEach(function (ref) { 731 | var key = ref.key; 732 | var val = ref.val; 733 | 734 | val = namespace + val; 735 | res[key] = function mappedGetter () { 736 | if (namespace && !getModuleByNamespace(this.$store, 'mapGetters', namespace)) { 737 | return 738 | } 739 | if (!(val in this.$store.getters)) { 740 | console.error(("[vuex] unknown getter: " + val)); 741 | return 742 | } 743 | return this.$store.getters[val] 744 | }; 745 | // mark vuex getter for devtools 746 | res[key].vuex = true; 747 | }); 748 | return res 749 | }); 750 | 751 | var mapActions = normalizeNamespace(function (namespace, actions) { 752 | var res = {}; 753 | normalizeMap(actions).forEach(function (ref) { 754 | var key = ref.key; 755 | var val = ref.val; 756 | 757 | val = namespace + val; 758 | res[key] = function mappedAction () { 759 | var args = [], len = arguments.length; 760 | while ( len-- ) args[ len ] = arguments[ len ]; 761 | 762 | if (namespace && !getModuleByNamespace(this.$store, 'mapActions', namespace)) { 763 | return 764 | } 765 | return this.$store.dispatch.apply(this.$store, [val].concat(args)) 766 | }; 767 | }); 768 | return res 769 | }); 770 | 771 | function normalizeMap (map) { 772 | return Array.isArray(map) 773 | ? map.map(function (key) { return ({ key: key, val: key }); }) 774 | : Object.keys(map).map(function (key) { return ({ key: key, val: map[key] }); }) 775 | } 776 | 777 | function normalizeNamespace (fn) { 778 | return function (namespace, map) { 779 | if (typeof namespace !== 'string') { 780 | map = namespace; 781 | namespace = ''; 782 | } else if (namespace.charAt(namespace.length - 1) !== '/') { 783 | namespace += '/'; 784 | } 785 | return fn(namespace, map) 786 | } 787 | } 788 | 789 | function getModuleByNamespace (store, helper, namespace) { 790 | var module = store._modulesNamespaceMap[namespace]; 791 | if (!module) { 792 | console.error(("[vuex] module namespace not found in " + helper + "(): " + namespace)); 793 | } 794 | return module 795 | } 796 | 797 | var index = { 798 | Store: Store, 799 | install: install, 800 | version: '2.3.0', 801 | mapState: mapState, 802 | mapMutations: mapMutations, 803 | mapGetters: mapGetters, 804 | mapActions: mapActions 805 | }; 806 | 807 | return index; 808 | 809 | }))); 810 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | 2 | * v-bind 简写方式 ":" 3 | 4 | v-bind:属性名=属性值 5 | 6 | * 在视图中输出值 7 | 8 | {{ 变量名 }} 9 | 10 | * v-on 简写方式 @ 11 | 12 | v-on:事件名=执行方法 13 | 14 | 15 | **一个实例就是由数据驱动的生命体** 16 | 17 | 特征： 18 | el: 挂在元素，决定当前vue的控制范围 19 | data: 对象 20 | template: 模板 21 | computed: 计算属性 22 | methods: 方法的集合 23 | filters: 过滤器 24 | components: 局部组件 25 | watch: 监听数据变化 26 | 27 | 生命周期： 28 | beforeCreate 创建之前 29 | created 创建完成 （关联数据，初始化事件） 30 | beforeMount dom生成之前 31 | mount dom生成 32 | beforeUpdate 33 | updated (如果数据更新了，则会触发update生命周期一般配合路由) 34 | beforeDestroy 35 | destroyed 36 | 37 | 这里面没有包含 keep-alive 时的两个生命周期，原因很简单：我们没有用到过。 38 | 39 | **vue组件** 40 | 41 | 特征：(基本同vue实例一样) 42 | props:数组、对象 43 | data:function(){ //函数(组件和实例对于data的定义有区别) 44 | return { 45 | 46 | } 47 | } 48 | 49 | 生命周期：（与vue实例相同，参考vue实例的生命周期） 50 | 51 | **vuex** 52 | 53 | 首先明白两个概念：视图容器和数据容器。 54 | 55 | 视图容器：通过 new Vue() 所创建的实例以及通过 Vue.Component() 所定义的组件都是视图容器 56 | 57 | 数据容器：通过 new Vuex() 所创建的store则是数据容器，这个store一旦注入到vue的实例，所有视图能够获取store的数据，无论这个数据是在哪一个组件中用，这就是所谓的时光旅行（time travel）。 58 | 59 | 使用方法： 60 | 61 | store是一个数据容器，本质是一个JavaScript对象，有4个规定的属性：state、 mutations、 actions、 getters。 62 | 63 | 1. 容器的数据都存放在state中。 64 | 65 | 视图直接获取state的值使用 $store.[属性名]即可。如果想要对数据做一定的处理再返回使用getters，调用方式$store.getters.[getter名]即可。 66 | 67 | 2. 无论通过哪种方式，要改变state的值最终必须通过mutations。 调用方式如：$store.commit('mutations-name',data)。 68 | 69 | mutations只能做同步的数据操作。 70 | 71 | 3. actions用来做异步操作。 72 | 73 | actions通过分发一个mutations来达到修改state的目的，不可以直接修改state。调用方式如：$store.dispatch('actions-name',data)。 74 | 75 | 总之： 76 | 77 | =>$store.[属性名]（获取数据） 78 | 修改数据：actions =>mutations =>state-- 79 | =>$store.getters.[getter名]（获取数据） 80 | 81 | 82 | 83 | 欢迎补充。 84 | 85 | 86 | --------------------------------------------------------------------------------