vuex的使用

lemon 發(fā)布于2019-08-02 10:14 / 781人閱讀

摘要：使用狀態(tài)對(duì)象的訪問我把理解成構(gòu)造器中的里面存放一些數(shù)據(jù)，例如用戶姓名性別身份證號(hào)等等。

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

安裝

npm install vuex --save

配置

我實(shí)在vue-cli環(huán)境中使用vuex的，所以這里就以這個(gè)環(huán)境作為項(xiàng)目文件結(jié)構(gòu)來寫配置了。
先在src/assets文件夾中新建一個(gè)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";

在全局構(gòu)造器中注冊(cè)一下：（這里千萬別忘了）

new Vue({
  el: "#app",
  router,
  components: { App },
  template: "",
  store: store   //在根實(shí)例下面注冊(cè)store，相當(dāng)于全局注冊(cè)，可以全局調(diào)用
})

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

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

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

或者在構(gòu)造器里面寫:

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

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

使用

1.state狀態(tài)對(duì)象的訪問（我把state理解成vue構(gòu)造器中的data）

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

 {{$store.state.name}}

但是上面這種寫法太長(zhǎng)了，而且看起來不直觀，查閱過文檔之后我發(fā)現(xiàn)，訪問state對(duì)象可以有以下三種寫法：

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

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

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

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

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

原先我調(diào)用add和reduce方法的時(shí)候，寫法是：

{{count}}

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

import {mapState,mapMutations} from "vuex";
methods: mapMutations(["add","reduce"]),
//需要注意的是，state寫在computed里面，而mutations寫在methods里面，因?yàn)樗窃贎click之后的方法

現(xiàn)在你可以這樣調(diào)用它：

{{count}}

3.訪問getters（我把getters理解成vue構(gòu)造器中的computed）

getters就像一道門，每操作一次數(shù)據(jù)，都會(huì)經(jīng)過一次它。

現(xiàn)在，在store.js中加入getters代碼：

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

怎么調(diào)用它呢？模仿state的調(diào)用方法。
因?yàn)樗鼈兌际菍?duì)數(shù)據(jù)進(jìn)行操作，不涉及方法，所以getters也寫在computed中。

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

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

computed: {
    ...mapState(["name","count"]),   //es6擴(kuò)展運(yùn)算符，用map必須得用這個(gè)，否則會(huì)報(bào)錯(cuò)
    ...mapGetters(["add100","changename"]),
    count2: function() {
        return this.$store.state.count;
    }
}

此時(shí)，每當(dāng)你操作一次button按鈕，無論是加法還是減法，它都會(huì)對(duì)count進(jìn)行+100的操作。當(dāng)然，此時(shí)的name是不會(huì)改變的，即使你引入了changename方法，但因?yàn)闆]有改變過name，所以就不會(huì)出發(fā)changename方法。

4.訪問actions

actions與getters的用法相似，但是它是異步調(diào)用，寫在methods里面。（說實(shí)話我是沒看懂這個(gè)actions有啥用）

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

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

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

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

在html代碼中使用：

reduce1方法調(diào)用了mutations中的reduce方法，每次點(diǎn)擊減1；
add1調(diào)用了mutations中的add方法，每次點(diǎn)擊加10，同時(shí)在3秒鐘之后，會(huì)調(diào)用一次減法，減去1；
因?yàn)檫€有g(shù)etters的設(shè)置，所以每次操作的時(shí)候還會(huì)再加100。

以上就是vuex的大致用法了，我平時(shí)只有state用的比較多。
我對(duì)vuex的理解很淺，如有不對(duì)的地方，請(qǐng)指正。