Repository: incubator-weex-site Updated Branches: refs/heads/master d71d8e589 -> b8af79e79
[WEEX-86][doc] update vuex and vue-router document Project: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/commit/f42e30d8 Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/tree/f42e30d8 Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/diff/f42e30d8 Branch: refs/heads/master Commit: f42e30d80cfb4b29d88cece64c63f148660faf26 Parents: b8ee5b9 Author: Hanks <[email protected]> Authored: Tue Nov 28 20:18:59 2017 +0800 Committer: Hanks <[email protected]> Committed: Tue Nov 28 20:18:59 2017 +0800 ---------------------------------------------------------------------- .../cn/guide/advanced/use-vuex-and-vue-router.md | 6 ++---- source/guide/advanced/use-vuex-and-vue-router.md | 18 ++++++++---------- 2 files changed, 10 insertions(+), 14 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/f42e30d8/source/cn/guide/advanced/use-vuex-and-vue-router.md ---------------------------------------------------------------------- diff --git a/source/cn/guide/advanced/use-vuex-and-vue-router.md b/source/cn/guide/advanced/use-vuex-and-vue-router.md index 844f8fb..ac3ce8e 100644 --- a/source/cn/guide/advanced/use-vuex-and-vue-router.md +++ b/source/cn/guide/advanced/use-vuex-and-vue-router.md @@ -10,7 +10,7 @@ version: 2.1 Vue.js ä¹æè¾å¤å¨è¾¹ææ¯äº§åï¼å¦ [Vuex](https://github.com/vuejs/vuex) å [vue-router](https://github.com/vuejs/vue-router) çï¼è¿äºåºä¹å¯ä»¥å¨ Weex ä¸å¾å¥½çå·¥ä½ã -> æ们åºäº Weex å Vue å¼åäºä¸ä¸ªçå®æ´é¡¹ç® [weex-hackernews](https://github.com/weexteam/weex-hackernews) ï¼å¨é¡¹ç®ä¸ä½¿ç¨äº Vuex å vue-router ï¼è½å¤å®ç°åä¸ä»½ä»£ç ï¼å¨ iOSãAndroidãWeb ä¸é½è½å®æ´å°å·¥ä½ã +> **注æ**ï¼ Weex 使ç¨åçç navigator æ¥ç®¡ç页é¢å®ä¾ï¼å¤ä¸ªå®ä¾ä¹é´çç¶ææ¯é离çãä¹å°±æ¯è¯´ï¼Vuex å vue-router åªè½ä½ç¨äºå½åä¸ä¸ªé¡µé¢ï¼æ æ³å¨å¤ä¸ªé¡µé¢é´å ±äº«ç¶æã ## ä½¿ç¨ Vuex @@ -18,9 +18,7 @@ Vue.js ä¹æè¾å¤å¨è¾¹ææ¯äº§åï¼å¦ [Vuex](https://github.com/vuejs/vuex Vuex æ¯ä¸ä¸ªä¸ä¸º Vue.js åºç¨ç¨åºå¼åçç¶æ管çå·¥å ·åºï¼å¯ä»¥å©ç¨ Vue.js çç»ç²åº¦æ°æ®ååºæºå¶æ¥è¿è¡é«æçç¶ææ´æ°ãå®éç¨éä¸å¼åå¨ç®¡çåºç¨çææç»ä»¶çç¶æï¼å¹¶ä»¥ç¸åºçè§åä¿è¯ç¶æ以ä¸ç§å¯é¢æµçæ¹å¼åçååã -ç±äºå¨ Vuex æ¬èº«å°±æ¯å¹³å°æ å ³çï¼æè¾å¼ºç移æ¤è½åï¼å®å ¨å¯ä»¥å¨ Weex ä¸æ£å¸¸å°ä½¿ç¨ Vuex ï¼é è¯»å ¶[å®æ¹ææ¡£](https://vuex.vuejs.org/zh-cn/)å¯ä»¥äºè§£è¯¦ç»ç使ç¨æ¹æ³ã - -Vuex ä¹éæå°äºå ¶å®æ¹è°è¯å·¥å · [devtools extension](https://github.com/vuejs/vue-devtools)ä¸ï¼æä¾äºè¯¸å¦ time-travel è°è¯ãç¶æå¿«ç §å¯¼å ¥å¯¼åºçé«çº§è°è¯åè½ãè¿äºå·¥å ·å¨ Web å¹³å°ä¸å¯ä»¥ä¸å¦æ¢å¾å°å·¥ä½ã +ç±äºå¨ Vuex æ¬èº«å°±æ¯å¹³å°æ å ³çï¼æè¾å¼ºç移æ¤è½åï¼å®å ¨å¯ä»¥å¨ Weex ä¸æ£å¸¸å°ä½¿ç¨ Vuexã Vuex ä¹éæå°äºå ¶å®æ¹è°è¯å·¥å · [devtools extension](https://github.com/vuejs/vue-devtools)ä¸ï¼æä¾äºè¯¸å¦ time-travel è°è¯ãç¶æå¿«ç §å¯¼å ¥å¯¼åºçé«çº§è°è¯åè½ãè¿äºå·¥å ·å¨ Web å¹³å°ä¸å¯ä»¥ä¸å¦æ¢å¾å°å·¥ä½ã ## ä½¿ç¨ vue-router http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/f42e30d8/source/guide/advanced/use-vuex-and-vue-router.md ---------------------------------------------------------------------- diff --git a/source/guide/advanced/use-vuex-and-vue-router.md b/source/guide/advanced/use-vuex-and-vue-router.md index 037f1bb..0851e18 100644 --- a/source/guide/advanced/use-vuex-and-vue-router.md +++ b/source/guide/advanced/use-vuex-and-vue-router.md @@ -8,9 +8,9 @@ version: 2.1 # Using Vuex and vue-router -Vue.js also has many peripheral technology products such as [Vuex](https://github.com/vuejs/vuex) and [vue-router](https://github.com/vuejs/vue-router), etc. Those libraries can also works well in Weex. +Vue.js has many peripheral technology products such as [Vuex](https://github.com/vuejs/vuex) and [vue-router](https://github.com/vuejs/vue-router), those libraries can also work well on Weex. -> We developed a complete project based on Weex and Vue.js which named [weex-hackernews](https://github.com/weepteam/web-ehackernews). We used Vuex and vue-loader in it, and it works well on both iOS, Android and web. +> **NOTE**: Weex is using native navigator to manage instance pages, the context of them are isolated. That means, Both Vuex and vue-router can only effect the single page, they can't share state between different pages. ## Using Vuex @@ -18,11 +18,9 @@ Vue.js also has many peripheral technology products such as [Vuex](https://githu  -Vuex is a state management pattern + library for Vue.js applications. it's also a library implementation tailored specifically for Vue.js to take advantage of its granular reactivity system for efficient updates. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. +Vuex is a state management pattern + library for Vue.js applications. It's also a library implementation tailored specifically for Vue.js to take advantage of its granular reactivity system for efficient updates. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. -As a kind of state management library, Vuex is platform-independent, It also can be used in Weex. Read its [official documents](https://vuex.vuejs.org/en/) for more details. - -It also integrates with Vue's official [devtools extension](https://github.com/vuejs/vue-devtools) to provide advanced features on web platform, such as zero-config time-travel debugging and state snapshot export / import. (web platform only) +As a kind of state management library, Vuex is platform-independent, It also can be used in Weex. It also integrates with Vue's official [devtools extension](https://github.com/vuejs/vue-devtools) to provide advanced features on web platform, such as zero-config time-travel debugging and state snapshot export / import. (web platform only) ## Using vue-router @@ -30,7 +28,7 @@ It also integrates with Vue's official [devtools extension](https://github.com/v Creating a Single-page Application with Vue.js + vue-router is dead simple. With Vue.js, you are already composing our application with components. When adding vue-router to the mix, all you need to do is map your components to the routes and let vue-router know where to render them. -However, there are many difference between web and Android or iOS, some features of vue-router are limited in Weex. +However, there are many differences between web and Android or iOS, some features of vue-router are limited in Weex. ### Router mode @@ -49,13 +47,13 @@ new Router({ }) ``` -Obviously "hash" mode and "history" mode are only available on the web, and have no effect in Weex. That is, you have to use "abstract" mode in Android and iOS. However, **vue-router will automatically be forced into "abstract" mode if no browser API is present.** so, just don't set the `mode` option, or set it to "abstract". +Obviously, `hash` mode and `history` mode are only available on the web, and have no effect in Weex. In other words, you can only use `abstract` mode in Android and iOS. However, vue-router will automatically be forced into `abstract` mode if no browser API is present. So, just **don't set the `mode` option, or set it to `abstract`**. ### Programmatic navigation -vue-router use `<router-link>` to create a navigation link, but in which some of the features based on the DOM events, it doesn't work well in the native environment. In Weex, you must use the [Programmatic Navigation](https://router.vuejs.org/en/essentials/navigation.html) to manage the router. +vue-router use `<router-link>` to create a navigation link, but in which, some features are based on the DOM events and it doesn't work well in the native environment. In Weex, you must use the [Programmatic Navigation](https://router.vuejs.org/en/essentials/navigation.html) to manage the router. -Here is an basic example using `<router-link>`: +Here is a basic example using `<router-link>`: ```html <!-- Can only be used on the web, it takes no effects on Android or iOS! -->
