vuex狀態管理

yibinnn 發布于2019-08-29 17:07 / 2333人閱讀

摘要：一前言本次接受一個系統，要求是能夠接入數據源得到數據集對數據集進行處理展現為數據的可視化，這一個系統為了接入公司自身的產品，后端技術采用，前端采用的項目架構方式，作為的狀態管理，是尤為重要的部分。

一、前言

本次接受一個BI系統，要求是能夠接入數據源-得到數據集-對數據集進行處理-展現為數據的可視化，這一個系統為了接入公司自身的產品，后端技術采用spring boot，前端采用vue+vuex+axios的項目架構方式，vuex作為vue的狀態管理，是尤為重要的部分。這里，我將vuex如何運作和使用做一次總結，有錯的地方，望多多提點。

二、vuex簡單使用

安裝vuex

cnpm install vuex --save

在src目錄下建立文件夾，命名為store，建立index.js

如圖所示：

在index.js中引入vue和vuex狀態管理，并導出vuex，代碼如下：

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
      token: 0
    },
  })
  export default store;

在main.js中引入剛剛創建好的store并作為vue的store

import Vue from "vue"
import App from "./App.vue"
import store from "./store/index"
Vue.config.productionTip = false
new Vue({
  render: h => h(App)
  ,
  store
}).$mount("#app")

獲得store里的token

在vue的組件中，想要獲得vuex里的全局數據，可以把vue看做一個類，在其下面有許多屬性，其中有我們剛剛注入的vuex，如圖

我們可以看到vue他本身就是一個json，在其下有$store這個對象，而$store下又有state，state下得就是我們存儲在vue中的全局數據，
在組件中通過this.$store.state.token即可獲得我們的數據。

三、vuex的核心概念之getters

有時候我們需要在獲得的數據做一些簡單的過濾或者處理的時候，getters就起到作用了。
代碼如下

getters:{
       getToken(state){
          return state.token;
       }

同直接獲取token的方式一樣。getters也已經掛載到了$store下，故，我們可以通過this.$store.state.getters.getToken的方式，調用
其函數。但vuex為我們提供了mapGetters能夠將其映射到對應的getters的方法上去，用法如下所示

import {mapGetters,mapActions} from "vuex"
export default {
  name: "app",
  components: {
    HelloWorld
  },
  computed:{
    ...mapGetters(["getToken"])
  },
  mounted() {
     console.log(this.getToken)
    console.log(this.$store.getters.getToken)
  
  },
}

映射出來的getters仍然掛載在vue上，如圖所示

四、vuex的核心概念之mutations與actions

我們可以吧mutations理解成一個事件函數，而actions就是觸發器，通過actions，發起動作。
簡單實例代碼如下。

  mutations:{
         setToken(state,n){
            state.token=state.token+n;
         }
       },
       actions:{
         setToken({commit},n){
           commit("setToken",n)
         }
       }

在組件中的使用，同getters的用法，
代碼如下

import {mapGetters,mapActions} from "vuex"
export default {
  name: "app",
  components: {
    HelloWorld
  },
  computed:{
    ...mapGetters(["getToken"])
  },
  
  mounted() {

    console.log(this)
    console.log(this.setToken(1))
    console.log(this.getToken)
  
  },methods:{
        ...mapActions(["setToken"])
  },

在vue的json中，同樣可以找到相同的屬性。

五、vuex核心概念之mudules

vuex允許我們將store分為不同的模塊，每個多帶帶的模塊具備getters，state，mutations，actions這四個store核心，

需要注意的是如果在模塊內部加入了namesapced：true這一個屬性。在取值的時候需要做一點細微的變動，通過mapGetters火mapActions映射時需要將模塊名作為路勁，來獲得該模塊的getters，和actions，模塊化代碼如下

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const moduleA = {
  namespaced:true,
  state: { a:1 },
  mutations: {  },
  actions: {  },
  getters: { geta(state){
    return state.a;
  } }
}

const moduleB = {
  namespaced:true,
  state: { b:1},
  mutations: {  },
  actions: {}
}

const store = new Vuex.Store({ 
 
    state: {
      token: 0
    },
    getters:{
       getToken(state){
          return state.token;
       },
     
    } , mutations:{
      setToken(state,n){
         state.token=state.token+n;
      }
    },
    actions:{
      setToken({commit},n){
        commit("setToken",n)
      }
    },
    modules: {
      a: moduleA,
      b: moduleB
    },
  })
  export default store;

在組件中獲得模塊A的值得時候，我們來看一下geta這個getters屬性，在vue中的狀態，如圖所示

geta為模塊a下得getters屬性，在獲取的時候就需要這樣

 computed:{
    // ...mapGetters(["getToken"])
    ...mapGetters("a",["geta"])
  },
  
  mounted() {

    console.log(this)
    console.log(this.geta)

而如果模塊沒有命令空間的話，vuex會自動將模塊內的getters，actions注入為全局的，直接按照原來個獲取方式就可以了。

六、總結

這是我對vuex的基本用法和基本理解方式，vuex當然不可能局限于此，此處只列舉了最簡單的，做個總結的同時也等同于記下，據說vue3塊出了，是用ts重寫的vue，到時再去看看，vue3又有了哪些變化，和哪些可取之處。本文所寫，有不對的地方，大家多多提出來。共同進步。

云服務器 GPU云服務器狀態管理 Vuex asp狀態管理系統 vuex cdn

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

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

vue 狀態管理（一）

摘要：在中添加原型屬性通過實現任意組件傳遞參數在掛載聲明周期函數中監聽自定義事件給傳遞數據由觸發一個事件，在接收數據的組件中監聽該事件狀態管理隨著組件的增加，通過以上方式共享數據，會越來越復雜，提供了狀態管理插件。 vue 狀態管理（一）父子組件之間往往使用props和 $emit 實現數據共享，任意組件可通過bus（一個vue實例）作為橋梁，實現數據共享。當項目中組件越來越...

MiracleWong 2019-08-23 18:09 評論0 收藏0
vuex淺入淺出

摘要：來自不同視圖的行為需要變更同一狀態。圖解后端的行為，響應在上的用戶輸入導致的狀態變化。中的非常類似于事件每個都有一個字符串的事件類型和一個回調函數。什么是Vuex? Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。 Vuex采用和Redux類似的單向數據流的方式來管理數據。用戶...

琛ｈ。 2019-08-01 18:01 評論0 收藏0
Vue學習日記（四）——Vue狀態管理vuex

摘要：說實在話，我在閱讀文檔的時候，也很難以去理解，甚至覺得沒有使用它我也可以。介紹那么到底是什么引用官網的說法就是是一個專為應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。前言先說句前話，如果不是接觸大型項目，不需要有多個子頁面，不使用vuex也是完全可以的。說實在話，我在閱讀vuex文檔的時候，也很難以去理解v...

fai1017 2019-08-30 13:53 評論0 收藏0
Vue學習日記（四）——Vue狀態管理vuex

摘要：說實在話，我在閱讀文檔的時候，也很難以去理解，甚至覺得沒有使用它我也可以。介紹那么到底是什么引用官網的說法就是是一個專為應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。前言先說句前話，如果不是接觸大型項目，不需要有多個子頁面，不使用vuex也是完全可以的。說實在話，我在閱讀vuex文檔的時候，也很難以去理解v...

zilu 2019-08-26 11:35 評論0 收藏0
Vue學習日記（四）——Vue狀態管理vuex

摘要：說實在話，我在閱讀文檔的時候，也很難以去理解，甚至覺得沒有使用它我也可以。介紹那么到底是什么引用官網的說法就是是一個專為應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。前言先說句前話，如果不是接觸大型項目，不需要有多個子頁面，不使用vuex也是完全可以的。說實在話，我在閱讀vuex文檔的時候，也很難以去理解v...

fjcgreat 2019-08-01 18:30 評論0 收藏0