<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          為什么使用Vuex

          時間:?2017-11-20閱讀:?5035標簽:?vuex

          在學習Vuex之前,先了解一下“單向數據流”


          這個狀態自管理應用包含以下幾個部分:

          state,驅動應用的數據源;
           view,以聲明方式將 state 映射到視圖; 
          actions,響應在 view 上的用戶輸入導致的狀態變化。(比如請求數據或者修改數據會導致數據源狀態改變)  

          但是遇到多個組件共享狀態時,單向數據流的簡潔性很容易被破壞,而且特別不方便。

          如果堅持使用,傳參的方法對于多層嵌套的組件將會非常繁瑣,各種各樣的問題通常會導致無法維護的代碼。

          所以我們把組件的共享狀態抽取出來,以一個全局單例模式管理(惰性單例的設計模式)
          每一個 Vuex 應用的核心就是 store(倉庫)。“store”基本上就是一個容器,它包含著你的應用中大部分的狀態 (state)。Vuex 和單純的全局對象有以下兩點不同:

          Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候,若 store 中的狀態發生變化,那么相應的組件也會相應地得到高效更新。

          你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態的變化,從而讓我們能夠實現一些工具幫助我們更好地了解我們的應用。

          對,Vuex核心就是它的store,其中,有三個重要的部分,

          State:通過它存取多個組件共享的數據
          Mutations:通過這個對象中的方法,可以改變State中的數據,但在這之前,必須通過顯式地提交(commit) 來觸發其中的方法。
          Actions:提交mutation,可以包含任意異步操作這一步不是必要的,前提是你不需要異步操作,例如ajax請求數據,

          Vuex的使用和理解

          以下內容基于vue-cli寫的,請先完成這一步

          通常Vuex會單獨寫在一個js文件中,

          store.js

          // 引入vue 和 vuex 模塊
          import Vue from 'vue'
          import Vuex from 'vuex'
          // 中間件,使用VueX作為Vue的一個參數
          Vue.use(Vuex)

          數據,類似組件中的data

          const state = {
            // count: 0
          }

          計算屬性,類似組件中的computed

          const getters = {
            // evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
          }

          用戶派發的行為,類似methods

          const actions = {
            // increment: ({commit}) => commit('increment')
          }

          必須通過這一步來修改數據

          const mutations = {
            // increment: ({count}) => {
            //   state.count++
            // }
          }

          導出這個對象

          export default new Vuex.Store({
            state,
            getters,
            actions,
            mutations
          })

          然后在main.js的Vue實例中,注冊一個store(倉庫)

          import store from './store'
          new Vue({
            ...
            store,
            ...
          })

          接下來從組件(視圖)開始,理解一下這個過程

          Vue-component:

          用戶的特定行為(需要使用Vuex的情況) 會派發一個任務給Actions 或者直接給Mutations

          寫在App.vue組件中
          HTMT

          <div @click="add">
            {{ count }}
          </div>

          JS

          methods: {
            add () {
              // 派發一個任務,叫做'increment'
              this.$store.dispatch('increment')
            }
          }

          Actions:

          Actions是用戶指定的行為,這里沒有異步操作,所以直接commit到Mutations

          const actions = {
            // const { commit } = store
            // commit === store.commit
            increment: ({commit}) => commit('increment')
            // es6的寫法,它等同于這樣:
            // increment ({commit}) {
            //   commit('increment')
            // }
          }

          Mutations:

          Mutations如上所述,修改一下state的數據

          const mutations = {
            increment: ({count}) => {
              state.count++
            }
          }

          state:

          state的數據被改變

          Vue-component:

          最后回到了組件這里,通過計算屬性獲取到改變的數據并顯示到頁面上

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

          getters

          另外,我們希望實現這么一個小的效果:count為偶數時為綠色,奇數時為紅色,那么我們在store中通過getters實現(當然在組件中通過計算屬性也可以實現,這里只是為了說明getters的作用)

          const getters = {
            // evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
          }

          在App.vue中的computed中寫上

          evenOrOdd (state) {
            return this.$store.getters.evenOrOdd
          }

          在模板中補充一點:

          :class="evenOrOdd"

          和對應的css:

          .even {
            color: green;
          }
          .odd {
            color: red;
          }

          轉載來源:https://segmentfault.com/a/1190000012070824

          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/127

          Vuex的數據重新加載頁面后消失

          一般我們在登錄成功的時候需要把用戶信息,菜單信息放置vuex中,作為全局的共享數據。但是在頁面刷新的時候vuex里的數據會重新初始化,導致數據丟失。因為vuex里的數據是保存在運行內存中的,當頁面刷新時,頁面會重新加載vue實例

          vuex的持久化

          Vuex是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應 用的所有組件的狀態,并以相應的規則保證狀態以一種可預測的方式發生變化.

          結合 Vue.observable 寫一個簡易 Vuex

          作為 Vue 全家桶的一員,Vuex 的重要性不言而喻,不管是用來管理狀態,還是封裝 Controler 都很好用。不過在一些體量較小的項目中,為了幾個簡單的狀態或者處理函數而引入 Vuex,就像是高射炮打蚊子,大材小用了

          頁面刷新時vuex數據持久化問題的解決方案

          vuex是在中大型項目中必不可少的狀態管理組件,刷新會重新更新狀態,但是有時候我們并不希望如此。例如全局相關的,如登錄狀態、token、以及一些不常更新的狀態等,我們更希望能夠固化到本地,減少無用的接口訪問,以及更佳的用戶體驗。

          Vuex與組件通信

          Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。也就是說 Vuex 用于單頁面應用組件之間的數據共享,在組件嵌套很多層的情況下,Vue 中父子組件的通信過程就變得很麻煩,此時使用 Vuex 方便了組件間的通信。

          vue中 Vuex

          由于狀態零散地分布在許多組件和組件之間的交互中,大型應用復雜度也經常逐漸增長。為了解決這個問題,Vue 提供 vuex。Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態

          如何簡化你的Vuex Store

          隨著Vue應用程序的大小增加,Vuex Store中的actions和mutations也會增加。本文,我們將介紹如何將其減少到易于管理的東西。Vuex是vue.js應用程序的狀態管理模式+庫。它充當應用程序中所有組件的集中存儲

          Vuex新手的理解與使用

          開始嘗試學習使用vue,是因為此前總是遇到頁面邏輯數據與視圖的一致性問題.在使用vue之前,我們使用jQuery插件的時候,一樁麻煩事就是既要在每個數據變更后,寫代碼去改變視圖,又要考慮html上各種輸入

          Vuex狀態管理,state、getter

          首先在 vue 2.0+ 你的vue-cli項目中安裝 vuex :然后 在src文件目錄下新建一個名為store的文件夾,為方便引入并在store文件夾里新建一個index.js,里面的內容如下:接下來,在 main.js里面引入store,然后再全局注入一下

          vue單頁面應用刷新網頁后vuex的state數據丟失的解決方案

          其實很簡單,因為store里的數據是保存在運行內存中的,當頁面刷新時,頁面會重新加載vue實例,store里面的數據就會被重新賦值。一種是state里的數據全部是通過請求來觸發action或mutation來改變

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网