亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue?(Vuex)中?store?基本用法

 更新時間:2023年01月16日 15:36:25   作者:hikktn  
Vuex?是一個專為?Vue.js?應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,這篇文章主要介紹了Vue?中?store?基本用法,需要的朋友可以參考下

store是一個管理狀態(tài),在vuex中使用。

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

  state: {

    //這里放全局參數(shù)

  },

  mutations: {

    //這里是set方法

  },

 getters: {        //這里是get方法,并且每次打開瀏覽器優(yōu)先執(zhí)行該方法,獲取所有的狀態(tài)   },

  actions: {

    // 處理state的方法體

  },

  modules: {

//這里是我自己理解的是為了給全局變量分組,所以需要寫提前聲明其他store文件,然后引入這里

  }

})

store的執(zhí)行順序:
打開瀏覽器 → getters → 組件調(diào)用actions中的方法 → mutations(設(shè)置state的值) → getters(更新數(shù)據(jù))
接著我直接從一個國外的項目,部分代碼拷貝出來,進行詳細解讀。
首先這是一個組件,有個點擊click事件。

    onAddRow (data) {
      const initVal = data.map((val, idx) => {
        return {
          colGrid: { span: val },
          isCustom: 'btn-addCol'
        }
      })
      this.addRow(initVal)
    },

接著調(diào)用了actions里的方法,該方法的寫法就很6,那個{}里的東西是由Vuex提供的,只是將Store里的數(shù)據(jù)提了出來

  addRow ({ commit, state }, reload) {
    let { layoutSections } = state
    let _idx = layoutSections.length
    let _newLaypout = [...layoutSections, reload]
    // 調(diào)用set方法,set全局的state
    commit(types.UPDATE_LAYOUT_SECTIONS, _newLaypout)
    commit(types.UPDATE_ACTIVE_SECTION, _idx)
    commit(types.UPDATE_ACTIVE_PROP, '')
  },

我們直接看Store源碼,就會發(fā)現(xiàn):

function registerAction (store, type, handler, local) {
  const entry = store._actions[type] || (store._actions[type] = []);
  entry.push(function wrappedActionHandler (payload, cb) {
    // 這里就是主要的參數(shù),我們?nèi)绻胍褂茫涂梢栽趝}里聲明它
    let res = handler.call(store, {
      dispatch: local.dispatch,
      commit: local.commit,
      getters: local.getters,
      state: local.state,
      rootGetters: store.getters,
      rootState: store.state
    }, payload, cb);
    if (!isPromise(res)) {
      res = Promise.resolve(res);
    }
    if (store._devtoolHook) {
      return res.catch(err => {
        store._devtoolHook.emit('vuex:error', err);
        throw err
      })
    } else {
      return res
    }
  });
}

通過debug

我們可以看到這個方法已經(jīng)被編譯成了這個樣子,但是第一個參數(shù),擁有的屬性,就是上面源碼中的參數(shù)。

這個方法傳過來的值

接著,調(diào)用下面三個方法

上面的意思相當于

this.$store.commit('setDemoValue', value);    

就會調(diào)用mutations的set方法

  [types.UPDATE_LAYOUT_SECTIONS] (state, load) {
    state.layoutSections = load
  },
  [types.UPDATE_ACTIVE_SECTION] (state, load) {
    state.activeSection = load
  },
  [types.UPDATE_ACTIVE_PROP] (state, load) {
    state.activeProp = load
  },

調(diào)用完成后,執(zhí)行g(shù)etters更新狀態(tài)

activeRow (state) {
    debugger
    let { layoutSections, activeSection } = state
    return layoutSections[activeSection] || []
  }

小結(jié)

vue里store的用法是什么

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

每一個 Vuex 應(yīng)用的核心就是 store(倉庫)。“store”基本上就是一個容器,它包含著你的應(yīng)用中大部分的狀態(tài) (state)。Vuex 和單純的全局對象有以下兩點不同:

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

你不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化,從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用。

到此這篇關(guān)于Vue 中 store 基本用法的文章就介紹到這了,更多相關(guān)Vue store 用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue.js實現(xiàn)簡單ToDoList 前期準備(一)

    Vue.js實現(xiàn)簡單ToDoList 前期準備(一)

    這篇文章主要介紹了Vue.js實現(xiàn)簡單ToDoList的前期準備,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • Vue數(shù)據(jù)驅(qū)動模擬實現(xiàn)1

    Vue數(shù)據(jù)驅(qū)動模擬實現(xiàn)1

    這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動模擬實現(xiàn)的相關(guān)資料,允許采用簡潔的模板語法聲明式的將數(shù)據(jù)渲染進DOM,且數(shù)據(jù)與DOM綁定在一起,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-01-01
  • vue中Axios的封裝與API接口的管理詳解

    vue中Axios的封裝與API接口的管理詳解

    這篇文章主要給大家介紹了關(guān)于vue中Axios的封裝與API接口的管理的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-08-08
  • 某些場景下建議vue query代替pinia原理解析

    某些場景下建議vue query代替pinia原理解析

    這篇文章主要為大家介紹了某些場景下建議vue-query代替pinia原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-02-02
  • vue組件實現(xiàn)文字居中對齊的方法

    vue組件實現(xiàn)文字居中對齊的方法

    這篇文章主要為大家詳細介紹了vue組件實現(xiàn)文字居中對齊的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-08-08
  • 解決vuex刷新數(shù)據(jù)消失問題

    解決vuex刷新數(shù)據(jù)消失問題

    這篇文章主要介紹了解決vuex刷新數(shù)據(jù)消失問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南

    Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南

    WangEditor是一個開源的富文本編輯器,由阿里云開發(fā),它提供了一套簡潔易用的API和豐富的功能,如拖拽上傳圖片、插入表格、自定義表情等,適用于網(wǎng)頁和移動應(yīng)用中的內(nèi)容編輯場景,本文介紹了Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南,需要的朋友可以參考下
    2024-08-08
  • vue3+element?plus中利用el-menu如何實現(xiàn)路由跳轉(zhuǎn)

    vue3+element?plus中利用el-menu如何實現(xiàn)路由跳轉(zhuǎn)

    這篇文章主要給大家介紹了關(guān)于vue3+element?plus中利用el-menu如何實現(xiàn)路由跳轉(zhuǎn)的相關(guān)資料,在Vue?Router中我們可以使用el-menu組件來實現(xiàn)菜單導(dǎo)航,通過點擊菜單項來跳轉(zhuǎn)到不同的路由頁面,需要的朋友可以參考下
    2023-12-12
  • vue中el-table多級嵌套列表(菜單使用el-switch代替)

    vue中el-table多級嵌套列表(菜單使用el-switch代替)

    本文主要介紹了el-table多級嵌套列表(菜單使用el-switch代替),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-06-06
  • Vuex如何獲取getter對象中的值(包括module中的getter)

    Vuex如何獲取getter對象中的值(包括module中的getter)

    這篇文章主要介紹了Vuex如何獲取getter對象中的值(包括module中的getter),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08

最新評論