關于vue、vuex的一些初步小結

joywek 發布于2019-08-21 17:55 / 1039人閱讀

摘要：只能是同步函數，原因是無法捕捉異步函數的快照。除了這三個概念外，還有類比計算屬性，用于從派生出一些值分割較大的狀態樹，便于管理。處理表單可手動監聽或是使用帶的雙向綁定計算屬性。

一、Vue組件的創建

一般語法：

Vue.component(tagName, options)

務必在根組件實例化之前注冊組件

組件options說明：

data: 必須是一個函數，目的在于返回獨立的對象，保證組件之間的數據不互相影響

components: 局部注冊一個組件，僅在當前組件作用域內可用

props: 用于父組件向子組件傳遞數據時使用，可傳靜態屬性，也可傳動態的（數據綁定，父組件數據變化引起子組件數據相應變化），一次性傳遞所有屬性可采用v-bind指令

computed: 計算屬性，在部分情況下可以代替watch的功能，也可用于:class的動態綁定

watch: 即屬性偵聽器，接受參數newData, oldData，含義顧名思義

methods: 定義組件內的方法

生命周期函數：beforeCreate, created, beforeMount, mounted, updated, beforeDestroy, destroyed，其具體含義可參照官方文檔

二、組件間數據傳遞

來看看文檔里一段值得參考的語法（位置：組件-自定義事件-.sync修飾符）：

:foo="bar"即父組件向子組件傳遞屬性foo，vue中采用單向數據流，這里是為了讓父組件的數據和數據的改動（若有的話）傳遞到子組件上，供子組件使用

update為vue生命周期函數，在數據變化前調用

這里update部分事實上為v-on的縮寫，作用是監聽子組件中foo的改變并調用對應的處理器

子組件向父組件發布事件(emit)會觸發父組件設置的監聽器（如果你設置了的話）

好了，這里涉及的概念可能比較多，所以再多解釋一下吧～為了邏輯上更加清新，vue是不推薦子組件改變父組件的數據的，主要是出于維護成本的考慮，這就是所謂的單向數據流。父組件可以通過改變prop影響子組件數據，而子組件可以通過emit觸發父組件方法。

但是，如果這樣的數據傳遞不僅僅限于父子組件之間，而是祖先與后代組件或是兄弟組件呢？顯然這會是一件很麻煩的事，為了處理這種多狀態、多通信的情形，我們引入了vuex。

三、vuex的使用

如果你之前使用過flux、redux等狀態狀態管理工具的話，那么應該會很容易理解這個工具是要做什么～

下面依次介紹一下state、mutation和action這三個核心概念：

state

是一個持久化存儲的狀態，不歸屬于vue的某個特定組件，除非刷新頁面，否則數據不會消失～

在根實例中注冊store，下發到所有子組件，使用如下：

computed: {
  count () {
    return this.$store.state.count
  }
}

如果想要簡化定義，使用mapState輔助函數就可，使用時從vuex引入該方法就可。

mutation

state的值不能直接被操作，想要改變它必須通過提交mutation的形式進行，方式為：

store.commit("something", payload)

注意一下第二個參數，這是以載荷形式提交參數，參數最多一個，想傳多個參數的話必須以對象的形式提交。

mutation只能是同步函數，原因是devtool無法捕捉異步函數的快照。

action

為了執行異步操作，vuex引入了action來完成這一工作，調用方式是用dispatch方法，簡化寫法與state和mutation是類似的，值得看看的是將它和es6的promise和es7的async與await結合起來的工作原理：

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit("someMutation")
        resolve()
      }, 1000)
    })
  }
}

這個action返回了一個Promise對象，可以在后續進行處理，同時action中也可以調用其他異步action。

除了這三個概念外，還有getter（類比計算屬性，用于從state派生出一些值）、module（分割較大的狀態樹，便于管理）。

處理表單可手動監聽input、change或是使用帶setter的雙向綁定計算屬性。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90211.html

關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
vuex在重構Cnode項目中的運用

摘要：定義需要狀態的參數變量，狀態變更用于改變的狀態，注意中是不能直接改變中的狀態的，一定要借助于的事件分發。而在中進行事件的分發就可以進行異步操作。當然還有許多的地方可以用到，比如說在本項目的彈窗組件也用到了，來根據具體情境顯示對應的提示文本。寫在文章前：在第一版初步實現cnode的基本功能后，本來是用本地存儲的存儲用戶登錄成功返回的用戶的基本信息，用于后面的回復功能，查看信息等操作需...

trilever 2019-08-20 10:42 評論0 收藏0