update for 2.0

x3hong · Jun 21, 2016 · 9624f31 · 9624f31
1 parent 8d11d11
commit 9624f31
Show file tree

Hide file tree

Showing 11 changed files with 45 additions and 52 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,6 +1,4 @@
 {
-  "extends": "standard",
-  "rules": {
-    "arrow-parens": [2, "as-needed"]
-  }
+  "root": true,
+  "extends": "vue"
 }
diff --git a/examples/chat/components/MessageSection.vue b/examples/chat/components/MessageSection.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="message-section">
     <h3 class="message-thread-heading">{{ thread.name }}</h3>
-    <ul class="message-list" v-el:list>
+    <ul class="message-list" ref="list">
       <message
-        v-for="message in messages | orderBy 'timestamp'"
+        v-for="message in sortedMessages"
         track-by="id"
         :message="message">
       </message>
@@ -28,10 +28,17 @@ export default {
       sendMessage
     }
   },
+  computed: {
+    sortedMessages () {
+      return this.messages
+        .slice()
+        .sort((a, b) => a.timestamp - b.timestamp)
+    }
+  },
   watch: {
     'thread.lastMessage': function () {
       this.$nextTick(() => {
-        const ul = this.$els.list
+        const ul = this.$refs.list
         ul.scrollTop = ul.scrollHeight
       })
     }

diff --git a/examples/chat/index.html b/examples/chat/index.html
@@ -6,7 +6,7 @@
     <link href="http://fonts.googleapis.com/css?family=Muli" rel="stylesheet" type="text/css">
   </head>
   <body>
-    <app></app>
+    <div id="app"></div>
     <script src="build.js"></script>
   </body>
 </html>
diff --git a/examples/chat/main.js b/examples/chat/main.js
@@ -11,9 +11,9 @@ Vue.filter('time', timestamp => {
 })
 
 new Vue({
-  el: 'body',
+  el: '#app',
   store,
-  components: { App }
+  render: h => h(App)
 })
 
 getAllMessages(store)
diff --git a/examples/counter/index.html b/examples/counter/index.html
@@ -5,7 +5,7 @@
     <title>vuex counter example</title>
   </head>
   <body>
-    <counter></counter>
+    <div id="app"></div>
     <script src="build.js"></script>
   </body>
 </html>
diff --git a/examples/counter/main.js b/examples/counter/main.js
@@ -3,7 +3,7 @@ import Counter from './Counter.vue'
 import store from './store'
 
 new Vue({
-  el: 'body',
+  el: '#app',
   store,
-  components: { Counter }
+  render: h => h(Counter)
 })
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuex",
-  "version": "0.6.3",
+  "version": "0.7.0",
   "description": "state management for Vue.js",
   "main": "dist/vuex.js",
   "files": [
@@ -46,22 +46,17 @@
     "chai": "^3.4.1",
     "css-loader": "^0.23.1",
     "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",
     "mocha": "^2.3.4",
-    "rollup": "^0.25.4",
+    "rollup": "^0.32.0",
     "rollup-plugin-babel": "^2.4.0",
     "sinon": "^1.17.3",
     "sinon-chai": "^2.8.0",
     "todomvc-app-css": "^2.0.3",
     "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-dev-server": "^1.12.1"
   }

diff --git a/src/index.js b/src/index.js
@@ -43,7 +43,9 @@ class Store {
     const silent = Vue.config.silent
     Vue.config.silent = true
     this._vm = new Vue({
-      data: state
+      data: {
+        state
+      }
     })
     Vue.config.silent = silent
     this._setupModuleState(state, modules)
@@ -63,7 +65,7 @@ class Store {
    */
 
   get state () {
-    return this._vm._data
+    return this._vm.state
   }
 
   set state (v) {
@@ -106,17 +108,17 @@ class Store {
    * Same API as Vue's $watch, except when watching a function,
    * the function gets the state as the first argument.
    *
-   * @param {String|Function} expOrFn
+   * @param {Function} fn
    * @param {Function} cb
    * @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 () {
     const Watcher = getWatcher(this._vm)
     /* eslint-disable no-new */
-    new Watcher(this._vm, '$data', () => {
+    new Watcher(this._vm, 'state', () => {
       if (!this._dispatching) {
         throw new Error(
           '[vuex] Do not mutate vuex store state outside mutation handlers.'

diff --git a/src/override.js b/src/override.js
@@ -1,20 +1,13 @@
 import { getWatcher, getDep } from './util'
 
 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.
    */
 
-  function vuexInit () {
+  function init () {
     const options = this.$options
     const { store, vuex } = options
     // store injection
@@ -31,7 +24,8 @@ export default function (Vue) {
           'provide the store option in your root component.'
         )
       }
-      let { state, getters, actions } = vuex
+      const { state, actions } = vuex
+      let { getters } = vuex
       // handle deprecated state option
       if (state && !getters) {
         console.warn(
@@ -43,14 +37,14 @@ export default function (Vue) {
       // getters
       if (getters) {
         options.computed = options.computed || {}
-        for (let key in getters) {
+        for (const key in getters) {
           defineVuexGetter(this, key, getters[key])
         }
       }
       // actions
       if (actions) {
         options.methods = options.methods || {}
-        for (let key in actions) {
+        for (const key in actions) {
           options.methods[key] = makeBoundAction(this.$store, actions[key], key)
         }
       }
@@ -109,7 +103,7 @@ export default function (Vue) {
     const Dep = getDep(vm)
     const watcher = new Watcher(
       vm,
-      state => getter(state),
+      vm => getter(vm.state),
       null,
       { lazy: true }
     )

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

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