Startseite Erkunden Hilfe
Registrieren Anmelden
oleg
/
vuex
Mirror von https://github.com/vuejs/vuex.git
1
0
Fork 0
Dateien Issues 0 Wiki
Quellcode durchsuchen

update for 2.0

Evan You vor 9 Jahren
Ursprung
8d11d112e1
Commit
9624f311a5
11 geänderte Dateien mit 45 neuen und 52 gelöschten Zeilen
Gesamtansicht Diff-Statistik anzeigen
  1. 2 4
      .eslintrc
  2. 10 3
      examples/chat/components/MessageSection.vue
  3. 1 1
      examples/chat/index.html
  4. 2 2
      examples/chat/main.js
  5. 1 1
      examples/counter/index.html
  6. 2 2
      examples/counter/main.js
  7. 5 10
      package.json
  8. 12 10
      src/index.js
  9. 7 13
      src/override.js
  10. 2 1
      src/util.js
  11. 1 5
      test/unit/test.js

+ 2 - 4
.eslintrc
Datei anzeigen 

@@ -1,6 +1,4 @@
 
 {
 
 {
 
-  "extends": "standard",
 
-  "rules": {
 
-    "arrow-parens": [2, "as-needed"]
 
-  }
 
+  "root": true,
 
+  "extends": "vue"
 
 }
 
 }

+ 10 - 3
examples/chat/components/MessageSection.vue
Datei anzeigen 

@@ -1,9 +1,9 @@
 
 <template>
 
 <template>
 
   <div class="message-section">
 
   <div class="message-section">
 
     <h3 class="message-thread-heading">{{ thread.name }}</h3>
 
     <h3 class="message-thread-heading">{{ thread.name }}</h3>
 
-    <ul class="message-list" v-el:list>
 
+    <ul class="message-list" ref="list">
 
       <message
 
       <message
 
-        v-for="message in messages | orderBy 'timestamp'"
 
+        v-for="message in sortedMessages"
 
         track-by="id"
 
         track-by="id"
 
         :message="message">
 
         :message="message">
 
       </message>
 
       </message>
 
@@ -28,10 +28,17 @@ export default {
 
       sendMessage
 
       sendMessage
 
     }
 
     }
 
   },
 
   },
 
+  computed: {
 
+    sortedMessages () {
 
+      return this.messages
 
+        .slice()
 
+        .sort((a, b) => a.timestamp - b.timestamp)
 
+    }
 
+  },
 
   watch: {
 
   watch: {
 
     'thread.lastMessage': function () {
 
     'thread.lastMessage': function () {
 
       this.$nextTick(() => {
 
       this.$nextTick(() => {
 
-        const ul = this.$els.list
 
+        const ul = this.$refs.list
 
         ul.scrollTop = ul.scrollHeight
 
         ul.scrollTop = ul.scrollHeight
 
       })
 
       })
 
     }
 
     }

+ 1 - 1
examples/chat/index.html
Datei anzeigen 

@@ -6,7 +6,7 @@
 
     <link href="http://fonts.googleapis.com/css?family=Muli" rel="stylesheet" type="text/css">
 
     <link href="http://fonts.googleapis.com/css?family=Muli" rel="stylesheet" type="text/css">
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
-    <app></app>
 
+    <div id="app"></div>
 
     <script src="build.js"></script>
 
     <script src="build.js"></script>
 
   </body>
 
   </body>
 
 </html>
 
 </html>

+ 2 - 2
examples/chat/main.js
Datei anzeigen 

@@ -11,9 +11,9 @@ Vue.filter('time', timestamp => {
 
 })
 
 })
 
 
 
 new Vue({
 
 new Vue({
 
-  el: 'body',
 
+  el: '#app',
 
   store,
 
   store,
 
-  components: { App }
 
+  render: h => h(App)
 
 })
 
 })
 
 
 
 getAllMessages(store)
 
 getAllMessages(store)

+ 1 - 1
examples/counter/index.html
Datei anzeigen 

@@ -5,7 +5,7 @@
 
     <title>vuex counter example</title>
 
     <title>vuex counter example</title>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
-    <counter></counter>
 
+    <div id="app"></div>
 
     <script src="build.js"></script>
 
     <script src="build.js"></script>
 
   </body>
 
   </body>
 
 </html>
 
 </html>

+ 2 - 2
examples/counter/main.js
Datei anzeigen 

@@ -3,7 +3,7 @@ import Counter from './Counter.vue'
 
 import store from './store'
 
 import store from './store'
 
 
 
 new Vue({
 
 new Vue({
 
-  el: 'body',
 
+  el: '#app',
 
   store,
 
   store,
 
-  components: { Counter }
 
+  render: h => h(Counter)
 
 })
 
 })

+ 5 - 10
package.json
Datei anzeigen 

@@ -1,6 +1,6 @@
 
 {
 
 {
 
   "name": "vuex",
 
   "name": "vuex",
 
-  "version": "0.6.3",
 
+  "version": "0.7.0",
 
   "description": "state management for Vue.js",
 
   "description": "state management for Vue.js",
 
   "main": "dist/vuex.js",
 
   "main": "dist/vuex.js",
 
   "files": [
 
   "files": [
 
@@ -46,22 +46,17 @@
 
     "chai": "^3.4.1",
 
     "chai": "^3.4.1",
 
     "css-loader": "^0.23.1",
 
     "css-loader": "^0.23.1",
 
     "eslint": "^2.2.0",
 
     "eslint": "^2.2.0",
 
-    "eslint-config-standard": "^5.1.0",
 
-    "eslint-plugin-promise": "^1.0.8",
 
-    "eslint-plugin-standard": "^1.3.2",
 
+    "eslint-config-vue": "^1.0.0",
 
     "function-bind": "^1.1.0",
 
     "function-bind": "^1.1.0",
 
     "mocha": "^2.3.4",
 
     "mocha": "^2.3.4",
 
-    "rollup": "^0.25.4",
 
+    "rollup": "^0.32.0",
 
     "rollup-plugin-babel": "^2.4.0",
 
     "rollup-plugin-babel": "^2.4.0",
 
     "sinon": "^1.17.3",
 
     "sinon": "^1.17.3",
 
     "sinon-chai": "^2.8.0",
 
     "sinon-chai": "^2.8.0",
 
     "todomvc-app-css": "^2.0.3",
 
     "todomvc-app-css": "^2.0.3",
 
     "uglify-js": "^2.6.2",
 
     "uglify-js": "^2.6.2",
 
-    "vue": "^1.0.17",
 
-    "vue-hot-reload-api": "^1.2.1",
 
-    "vue-html-loader": "^1.0.0",
 
-    "vue-loader": "^8.2.0",
 
-    "vue-style-loader": "^1.0.0",
 
+    "vue": "^2.0.0-alpha.5",
 
+    "vue-loader": "^9.0.1",
 
     "webpack": "^1.12.8",
 
     "webpack": "^1.12.8",
 
     "webpack-dev-server": "^1.12.1"
 
     "webpack-dev-server": "^1.12.1"
 
   }
 
   }

+ 12 - 10
src/index.js
Datei anzeigen 

@@ -43,7 +43,9 @@ class Store {
 
     const silent = Vue.config.silent
 
     const silent = Vue.config.silent
 
     Vue.config.silent = true
 
     Vue.config.silent = true
 
     this._vm = new Vue({
 
     this._vm = new Vue({
 
-      data: state
 
+      data: {
 
+        state
 
+      }
 
     })
 
     })
 
     Vue.config.silent = silent
 
     Vue.config.silent = silent
 
     this._setupModuleState(state, modules)
 
     this._setupModuleState(state, modules)
 
@@ -63,7 +65,7 @@ class Store {
 
    */
 
    */
 
 
 
   get state () {
 
   get state () {
 
-    return this._vm._data
 
+    return this._vm.state
 
   }
 
   }
 
 
 
   set state (v) {
 
   set state (v) {
 
@@ -106,17 +108,17 @@ class Store {
 
    * Same API as Vue's $watch, except when watching a function,
 
    * Same API as Vue's $watch, except when watching a function,
 
    * the function gets the state as the first argument.
 
    * the function gets the state as the first argument.
 
    *
 
    *
 
-   * @param {String|Function} expOrFn
 
+   * @param {Function} fn
 
    * @param {Function} cb
 
    * @param {Function} cb
 
    * @param {Object} [options]
 
    * @param {Object} [options]
 
    */
 
    */
 
 
 
-  watch (expOrFn, cb, options) {
 
-    return this._vm.$watch(() => {
 
-      return typeof expOrFn === 'function'
 
-        ? expOrFn(this.state)
 
-        : this._vm.$get(expOrFn)
 
-    }, cb, options)
 
+  watch (fn, cb, options) {
 
+    if (typeof fn !== 'function') {
 
+      console.error('Vuex store.watch only accepts function.')
 
+      return
 
+    }
 
+    return this._vm.$watch(() => fn(this.state), cb, options)
 
   }
 
   }
 
 
 
   /**
 
   /**
 
@@ -186,7 +188,7 @@ class Store {
 
   _setupMutationCheck () {
 
   _setupMutationCheck () {
 
     const Watcher = getWatcher(this._vm)
 
     const Watcher = getWatcher(this._vm)
 
     /* eslint-disable no-new */
 
     /* eslint-disable no-new */
 
-    new Watcher(this._vm, '$data', () => {
 
+    new Watcher(this._vm, 'state', () => {
 
       if (!this._dispatching) {
 
       if (!this._dispatching) {
 
         throw new Error(
 
         throw new Error(
 
           '[vuex] Do not mutate vuex store state outside mutation handlers.'
 
           '[vuex] Do not mutate vuex store state outside mutation handlers.'

+ 7 - 13
src/override.js
Datei anzeigen 

@@ -1,20 +1,13 @@
 
 import { getWatcher, getDep } from './util'
 
 import { getWatcher, getDep } from './util'
 
 
 
 export default function (Vue) {
 
 export default function (Vue) {
 
-  // override init and inject vuex init procedure
 
-  const _init = Vue.prototype._init
 
-  Vue.prototype._init = function (options = {}) {
 
-    options.init = options.init
 
-      ? [vuexInit].concat(options.init)
 
-      : vuexInit
 
-    _init.call(this, options)
 
-  }
 
+  Vue.mixin({ init })
 
 
 
   /**
 
   /**
 
    * Vuex init hook, injected into each instances init hooks list.
 
    * Vuex init hook, injected into each instances init hooks list.
 
    */
 
    */
 
 
 
-  function vuexInit () {
 
+  function init () {
 
     const options = this.$options
 
     const options = this.$options
 
     const { store, vuex } = options
 
     const { store, vuex } = options
 
     // store injection
 
     // store injection
 
@@ -31,7 +24,8 @@ export default function (Vue) {
 
           'provide the store option in your root component.'
 
           'provide the store option in your root component.'
 
         )
 
         )
 
       }
 
       }
 
-      let { state, getters, actions } = vuex
 
+      const { state, actions } = vuex
 
+      let { getters } = vuex
 
       // handle deprecated state option
 
       // handle deprecated state option
 
       if (state && !getters) {
 
       if (state && !getters) {
 
         console.warn(
 
         console.warn(
 
@@ -43,14 +37,14 @@ export default function (Vue) {
 
       // getters
 
       // getters
 
       if (getters) {
 
       if (getters) {
 
         options.computed = options.computed || {}
 
         options.computed = options.computed || {}
 
-        for (let key in getters) {
 
+        for (const key in getters) {
 
           defineVuexGetter(this, key, getters[key])
 
           defineVuexGetter(this, key, getters[key])
 
         }
 
         }
 
       }
 
       }
 
       // actions
 
       // actions
 
       if (actions) {
 
       if (actions) {
 
         options.methods = options.methods || {}
 
         options.methods = options.methods || {}
 
-        for (let key in actions) {
 
+        for (const key in actions) {
 
           options.methods[key] = makeBoundAction(this.$store, actions[key], key)
 
           options.methods[key] = makeBoundAction(this.$store, actions[key], key)
 
         }
 
         }
 
       }
 
       }
 
@@ -109,7 +103,7 @@ export default function (Vue) {
 
     const Dep = getDep(vm)
 
     const Dep = getDep(vm)
 
     const watcher = new Watcher(
 
     const watcher = new Watcher(
 
       vm,
 
       vm,
 
-      state => getter(state),
 
+      vm => getter(vm.state),
 
       null,
 
       null,
 
       { lazy: true }
 
       { lazy: true }
 
     )
 
     )

+ 2 - 1
src/util.js
Datei anzeigen 

@@ -56,7 +56,8 @@ export function deepClone (obj) {
 
 let Watcher
 
 let Watcher
 
 export function getWatcher (vm) {
 
 export function getWatcher (vm) {
 
   if (!Watcher) {
 
   if (!Watcher) {
 
-    const unwatch = vm.$watch('__vuex__', a => a)
 
+    const noop = function () {}
 
+    const unwatch = vm.$watch(noop, noop)
 
     Watcher = vm._watchers[0].constructor
 
     Watcher = vm._watchers[0].constructor
 
     unwatch()
 
     unwatch()
 
   }
 
   }

+ 1 - 5
test/unit/test.js
Datei anzeigen 

@@ -300,17 +300,13 @@ describe('Vuex', () => {
 
         [TEST]: state => state.a++
 
         [TEST]: state => state.a++
 
       }
 
       }
 
     })
 
     })
 
-    let watchedValueOne, watchedValueTwo
 
+    let watchedValueOne
 
     store.watch(({ a }) => a, val => {
 
     store.watch(({ a }) => a, val => {
 
       watchedValueOne = val
 
       watchedValueOne = val
 
     })
 
     })
 
-    store.watch('a', val => {
 
-      watchedValueTwo = val
 
-    })
 
     store.dispatch(TEST)
 
     store.dispatch(TEST)
 
     Vue.nextTick(() => {
 
     Vue.nextTick(() => {
 
       expect(watchedValueOne).to.equal(2)
 
       expect(watchedValueOne).to.equal(2)
 
-      expect(watchedValueTwo).to.equal(2)
 
       done()
 
       done()
 
     })
 
     })
 
   })
 
   })