Merge pull request #10 from medatc/dev

releases:[0.2.3]

docs/zh-cn/global-rules.md

@@ -18,9 +18,10 @@
                 }
               },
               manuals: {
-                // ... manual会自动加入fetch、reset两个方法，请参照Vuet的实例方法
+                // ... manual会对fetch、reset、getState、setState方法进行一层封装，自动传入path参数，请参照Vuet的实例方法，
                 plus ({ state, vm, vuet }) {
                   state.count++
+                  // 或 this.setState({ count: count })
                 },
                 reduce ({ state, vm, vuet }) {
                   state.count--
@@ -40,7 +41,6 @@
           // manual: 'test'
         })
       ```
-  - 描述: 这是一种特殊的规则，它无法自动更新数据，它需要你手动调用时才会更新数据
 - need
   - 描述: 每次都会在组件的`beforeCreate`钩子中调用一次更新
 - once

docs/zh-cn/instance-attr.md

@@ -26,6 +26,9 @@
 - **vm**
   - 类型: `只读`
   - 描述: Vuet内部的Vue实例
+- **name**
+  - 类型: `只读`
+  - 描述: 存储了模块的原始名称，`vuet.names['path']`来获取，在开发一些插件时尤其有用
 
 ### Vue组件内注入Vuet实例属性
 ```javascript

docs/zh-cn/instance-function.md

@@ -55,12 +55,12 @@
     })
     vuet.getState('myModule') // { count: 0 }
     ```
-- `setState(path: String, newState: Object)`  
+- `setState(path: String, newState: any)`  
   - 参数: 
     - `path` 模块的路径，必选参  
     - `newState` 新的状态，必选参
   - 返回值: `this`
-  - 描述: 设置某个模块的状态
+  - 描述: 设置某个模块的状态，设置的内容必须保证和模块的数据类型一致才有效，`Object`类型比较特殊，会和原来的对象进行浅合并
   - 例子: 
     ```javascript
     const vuet = new Vuet({

examples/manual/App.vue

@@ -1,35 +1,35 @@
 <template>
   <div>
     <div class="test-1">
-      <h2>Test1</h2>
-      <div class="count">{{ test1.count }}</div>
+      <h2>Count1</h2>
+      <div class="count">{{ count1 }}</div>
       <h3>Reset name</h3>
-      <button class="plus" @click="Test1.plus">Test1.plus</button>
-      <button class="reduce" @click="Test1.reduce">Test1.reduce</button>
-      <button class="fetch" @click="Test1.fetch">Test1.fetch</button>
-      <button class="reset" @click="Test1.reset">Test1.reset</button>
+      <button class="plus" @click="Count1.plus">Count1.plus</button>
+      <button class="reduce" @click="Count1.reduce">Count1.reduce</button>
+      <button class="fetch" @click="Count1.fetch">Count1.fetch</button>
+      <button class="reset" @click="Count1.reset">Count1.reset</button>
     </div>
 
     <hr>
     <div class="test-2">
-      <h2>test2</h2>
-      <div class="count">{{ test2.count }}</div>
+      <h2>count2</h2>
+      <div class="count">{{ count2 }}</div>
       <h3>Manuals get name</h3>
-      <button class="plus" @click="test2s.plus">test2s.plus</button>
-      <button class="reduce" @click="test2s.reduce">test2s.reduce</button>
-      <button class="fetch" @click="test2s.fetch">test2s.fetch</button>
-      <button class="reset" @click="test2s.reset">test2s.reset</button>
+      <button class="plus" @click="count2s.plus">count2s.plus</button>
+      <button class="reduce" @click="count2s.reduce">count2s.reduce</button>
+      <button class="fetch" @click="count2s.fetch">count2s.fetch</button>
+      <button class="reset" @click="count2s.reset">count2s.reset</button>
     </div>
 
     <hr>
     <div class="test-3">
       <h2>Test3</h2>
-      <div class="count">{{ test3.count }}</div>
+      <div class="count">{{ count3 }}</div>
       <h3>Default name</h3>
-      <button class="plus" @click="$test3.plus">$test3.plus</button>
-      <button class="reduce" @click="$test3.reduce">$test3.reduce</button>
-      <button class="fetch" @click="$test3.fetch">$test3.fetch</button>
-      <button class="reset" @click="$test3.reset">$test3.reset</button>
+      <button class="plus" @click="$count3.plus">$count3.plus</button>
+      <button class="reduce" @click="$count3.reduce">$count3.reduce</button>
+      <button class="fetch" @click="$count3.fetch">$count3.fetch</button>
+      <button class="reset" @click="$count3.reset">$count3.reset</button>
     </div>
   </div>
 </template>
@@ -39,15 +39,15 @@
   export default {
     mixins: [
       mapModules({
-        test1: 'test1',
-        test2: 'test2',
-        test3: 'test3'
+        count1: 'count1',
+        count2: 'count2',
+        count3: 'count3'
       }),
       mapRules({
         manual: [
-          { path: 'test1', name: 'Test1' },
-          'test2',
-          'test3'
+          { path: 'count1', name: 'Count1' },
+          'count2',
+          'count3'
         ]
       })
     ]

examples/manual/vuet.js

@@ -5,64 +5,52 @@ Vue.use(Vuet)
 
 export default new Vuet({
   modules: {
-    test1: {
+    count1: {
       data () {
-        return {
-          count: 0
-        }
+        return 0
       },
       async fetch () {
-        return {
-          count: 100
-        }
+        return 100
       },
       manuals: {
         plus ({ state }) {
-          state.count++
+          this.setState(++state)
         },
         reduce ({ state }) {
-          state.count--
+          this.setState(--state)
         }
       }
     },
-    test2: {
+    count2: {
       data () {
-        return {
-          count: 0
-        }
+        return 0
       },
       async fetch () {
-        return {
-          count: 100
-        }
+        return 100
       },
       manuals: {
-        name: 'test2s',
+        name: 'count2s',
         plus ({ state }) {
-          state.count++
+          this.setState(++state)
         },
         reduce ({ state }) {
-          state.count--
+          this.setState(--state)
         }
       }
     },
-    test3: {
+    count3: {
       data () {
-        return {
-          count: 0
-        }
+        return 0
       },
       async fetch () {
-        return {
-          count: 100
-        }
+        return 100
       },
       manuals: {
         plus ({ state }) {
-          state.count++
+          this.setState(++state)
         },
         reduce ({ state }) {
-          state.count--
+          this.setState(--state)
         }
       }
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuet",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Vue state management plugin",
   "main": "dist/vuet.js",
   "scripts": {

src/rules/manual.js

@@ -19,19 +19,17 @@ export default {
         methods.reset = (...arg) => {
           return this.$vuet.reset(path, ...arg)
         }
+        methods.getState = (...arg) => {
+          return this.$vuet.getState(path, ...arg)
+        }
+        methods.setState = (...arg) => {
+          return this.$vuet.setState(path, ...arg)
+        }
         methods.fetch = (...arg) => {
           return this.$vuet.fetch(path, ...arg)
         }
-        if (name) {
-          this[name] = methods
-        } else if (manuals.name) {
-          this[manuals.name] = methods
-        } else {
-          const arr = path.split(this.$vuet._options.pathJoin)
-          const name = `$${arr[arr.length - 1]}`
-          const $methods = this[name] = {}
-          Object.assign($methods, methods)
-        }
+        const newName = name || manuals.name || `$${this.$vuet.names[path]}`
+        this[newName] = methods
       }
     }
   }

src/vuet.js

@@ -17,6 +17,7 @@ export default class Vuet {
     this.options = options || {}
     this.app = null
     this.store = {}
+    this.names = {}
     this.beforeHooks = [] // Before the request begins
     this.afterHooks = [] // After the request begins
     this.vm = null
@@ -64,6 +65,7 @@ export default class Vuet {
           }
           this._options.modules[newPath] = item
           this.reset(newPath)
+          this.names[newPath] = k
         }
         if (keys.indexOf(k) === -1 && utils.isObject(item)) {
           initModule(_path, item)
@@ -74,11 +76,11 @@ export default class Vuet {
     callRuleHook('init', this)
   }
   getState (path) {
-    return this.store[path] || {}
+    return this.store[path]
   }
   setState (path, newState) {
-    if (!utils.isObject(newState)) return this
-    if (!this.store[path]) {
+    if (this.store[path] && Object.prototype.toString.call(this.store[path]) !== Object.prototype.toString.call(newState)) return this
+    if (!this.store[path] || !utils.isObject(newState)) {
       _Vue.set(this.store, path, newState)
       return this
     }
@@ -116,12 +118,17 @@ export default class Vuet {
     })
   }
   reset (path) {
-    const data = this._options.data.call(this)
-    const module = this._options.modules[path]
-    if (utils.isFunction(module.data)) {
-      Object.assign(data, module.data.call(this, path))
+    const baseData = this._options.data.call(this)
+    const { data } = this._options.modules[path]
+    if (utils.isFunction(data)) {
+      const any = data.call(this, path)
+      if (utils.isObject(any)) {
+        Object.assign(baseData, any)
+        this.setState(path, baseData)
+      } else {
+        this.setState(path, any)
+      }
     }
-    this.setState(path, data)
     return this
   }
   destroy () {