vuex的使用

tunny 發布于2019-08-22 16:28 / 336人閱讀

摘要：使用狀態對象的訪問我把理解成構造器中的里面存放一些數據，例如用戶姓名性別身份證號等等。

vuex是配合vue一塊兒使用的一個狀態管理工具。
我通常使用它來保存一些全局的數據，例如用戶登錄信息，用戶身份信息，總之一些在很多頁面都會使用到的信息，都保存在vuex里面，用的時候就不需要再去請求接口了，直接去vuex里面拿就可以了。
先放官網地址

安裝

npm install vuex --save

配置

我實在vue-cli環境中使用vuex的，所以這里就以這個環境作為項目文件結構來寫配置了。
先在src/assets文件夾中新建一個vuex/store.js文件，建好之后在文件中寫如下代碼：

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        name: "xiaoming",
        count: 1
    }
})
export default store

在main.js中引入store.js:

import store from "@/assets/vuex/store";

在全局構造器中注冊一下：（這里千萬別忘了）

new Vue({
  el: "#app",
  router,
  components: { App },
  template: "",
  store: store   //在根實例下面注冊store，相當于全局注冊，可以全局調用
})

//題外話
//在vue-cli中，引入某些特定后綴的文件是不需要寫全后綴的，就像上面這個store
//因為在config/webpack.base.conf.js文件中，有這樣一段代碼：
    resolve: {
        extensions: [".js", ".vue", ".json"],  //這些后綴的文件可以不寫，可以自己隨意添加
        alias: {   //模塊別名定義，方便后續直接引用別名，無須多寫長長的地址
          "vue$": "vue/dist/vue.esm.js",
          "@": resolve("src"),  //從src文件夾開始尋找文件
        }
    }

到這里，vuex已經在你的項目中安裝好并且可以使用了。你只需要在vue的html的部分寫上如下代碼：

{{$store.state.name}}
       //頁面中會顯示"xiaoming"

或者在構造器里面寫:

console.log(this.$store.state.name);      //打印"xiaoming"

html代碼書寫取值的時候可以不加this，script代碼中必須加this。

使用

1.state狀態對象的訪問（我把state理解成vue構造器中的data）

state里面存放一些數據，例如用戶姓名、性別、身份證號等等。之前我的訪問方式是：

 {{$store.state.name}}

但是上面這種寫法太長了，而且看起來不直觀，查閱過文檔之后我發現，訪問state對象可以有以下三種寫法：

//如果我想在頁面中只寫{{name}}，可以這樣寫：

 1. computed: {
        name() {
            return this.$store.state.name;
        }
    }
    
 2. import {mapState} from "vuex";
    computed: mapState({
        name: state => state.name    //es6箭頭函數
    })
 
 3. import {mapState} from "vuex";
    computed: mapState(["name"]);    //這種寫法最簡單，推薦

2.訪問mutations方法（我把mutations理解成vue構造器中的methods）

先在store.js中寫上如下代碼：

const store = new Vuex.Store({
    state: {
        name: "xiaoming",
        count: 1
    },
    mutations: {
        add(state,num) {   //接收一個外部參數
            state.count += num;
        },
        reduce(state) {
            state.count --;
        }
    }
})

原先我調用add和reduce方法的時候，寫法是：

{{count}}

但是這種調用方法的寫法也太長，需要寫上$store.commit這種東西，太啰嗦。
模仿訪問state的方法，它也有另外一種便捷的寫法：

import {mapState,mapMutations} from "vuex";
methods: mapMutations(["add","reduce"]),
//需要注意的是，state寫在computed里面，而mutations寫在methods里面，因為它是在@click之后的方法

現在你可以這樣調用它：

{{count}}

3.訪問getters（我把getters理解成vue構造器中的computed）

getters就像一道門，每操作一次數據，都會經過一次它。

現在，在store.js中加入getters代碼：

const store = new Vuex.Store({
    state: {
        name: "xiaoming",
        count: 1
    },
    mutations: {
        add(state,num) {   //接收一個外部參數
            state.count += num;
        },
        reduce(state) {
            state.count --;
        }
    },
    getters: {
        add100(state) {
            return state.conut += 100;   //每操作一次count，它都會加上100
        },
        changename(state) {
            return state.name + "c";     //每操作一次name，它都會拼接上一個c    
        }
    }
})

怎么調用它呢？模仿state的調用方法。
因為它們都是對數據進行操作，不涉及方法，所以getters也寫在computed中。

import {mapState,mapMutations,mapGetters} from "vuex";

//現在來看computed的代碼要怎么寫
//在寫state的時候，我們把computed中的代碼寫成了這樣：
//computed: mapState(["name"]);
//那如果現在再加入mapGetters，就需要改變computed的樣子，具體應該這樣寫：

computed: {
    ...mapState(["name","count"]),   //es6擴展運算符，用map必須得用這個，否則會報錯
    ...mapGetters(["add100","changename"]),
    count2: function() {
        return this.$store.state.count;
    }
}

此時，每當你操作一次button按鈕，無論是加法還是減法，它都會對count進行+100的操作。當然，此時的name是不會改變的，即使你引入了changename方法，但因為沒有改變過name，所以就不會出發changename方法。

4.訪問actions

actions與getters的用法相似，但是它是異步調用，寫在methods里面。（說實話我是沒看懂這個actions有啥用）

先來完善一下我們的store.js中的代碼：

const store = new Vuex.Store({
    state: {
        name: "xiaoming",
        count: 1
    },
    mutations: {
        add(state,num) {   //接收一個外部參數
            state.count += num;
        },
        reduce(state) {
            state.count --;
        }
    },
    getters: {
        add100(state) {
            return state.conut += 100;   //每操作一次count，它都會加上100
        },
        changename(state) {
            return state.name + "c";     //每操作一次name，它都會拼接上一個c    
        }
    },
    actions: {
        add1(context) {                    //參數context即全局上下文對象，store
            context.commit("add",10);      //通過context調用add方法
            setTimeout(()=>{context.commit("reduce")},3000)
        },
        reduce1({commit}) {                //{commit}是另一種傳參方式，一個封裝好的commit
            commit("reduce");
        }
    }
})

寫好actions方法了之后，就來調用它，調用方法跟mutations差不多：

methods: {
    ...mapMutations(["add","reduce"]),
    ...mapActions(["add1","reduce1"])，
    aa(i) {
        console.log(i)
    }
}

在html代碼中使用：

reduce1方法調用了mutations中的reduce方法，每次點擊減1；
add1調用了mutations中的add方法，每次點擊加10，同時在3秒鐘之后，會調用一次減法，減去1；
因為還有getters的設置，所以每次操作的時候還會再加100。

以上就是vuex的大致用法了，我平時只有state用的比較多。
我對vuex的理解很淺，如有不對的地方，請指正。

GPU云服務器云服務器 Vuex vuex cdn Vue_Vuex 數組的使用

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

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

Vuex源碼學習（一）功能梳理

摘要：我們通常稱之為狀態管理模式，用于解決組件間通信的以及多組件共享狀態等問題。創建指定命名空間的輔助函數，總結的功能首先分為兩大類自己的實例使用為組件中使用便利而提供的輔助函數自己內部對數據狀態有兩種功能修改數據狀態異步同步。 what is Vuex ? 這句話我想每個搜索過Vuex官網文檔的人都看到過，在學習源碼前，當然要有一些前提條件了。了解Vuex的作用，以及他的使用場景。 ...

livem 2019-08-23 16:11 評論0 收藏0
Vuex源碼閱讀筆記

摘要：而鉆研最好的方式，就是閱讀的源代碼。整個的源代碼，核心內容包括兩部分。逃而動手腳的代碼，就存在于源代碼的中。整個源代碼讀下來一遍，雖然有些部分不太理解，但是對和一些代碼的使用的理解又加深了一步。筆記中的Vue與Vuex版本為1.0.21和0.6.2,需要閱讀者有使用Vue，Vuex，ES6的經驗。起因俗話說得好，沒有無緣無故的愛，也沒有無緣無故的恨，更不會無緣無故的去閱讀別人的源...

hosition 2019-08-21 13:44 評論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
vuex入門

摘要：使用，引入之后用進行引用。在模板中引入們剛建的文件，并在模板中用輸出的值。在文件中加入兩個改變的方法。和單純的全局對象有以下兩點不同的狀態存儲是響應式的。改變中的狀態的唯一途徑就是顯式地提交。 vuex 是什么？ Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。通俗的解釋就是，Vuex 就是為 vue 組件之間進行數據共享而開發的插件。 vuex 什么時候用？實現數據...

weakish 2019-08-23 16:56 評論0 收藏0