vuex基礎學習

vuex用來作什麼？

• 答：vuex爲存儲咱們共享數據的一個倉庫

安裝

在vue-cli 3框架中使用

vue add vuex
複製代碼

在vue-cli 2中使用

npm install vuex -save
複製代碼

引入vue項目

*使用時記得要將store.js文件引入到main.js中才可以使用

import store from './store';
new Vue({
    'el': '#app',
    router,
    store,
    'template': '<App/>',
    'components': {App},
});
複製代碼

組成結構

*在vue-cli 2中須要本身手動添加該文件

*在安裝完成後，vue-cli3會自動在你的項目中增長store.js文件，文件中內容以下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    strict: true,
    state: {
        //公共數據池，在項目的任何組件中均可以拿到數據池中的內容並可進行更改
    }，
    getters: {
        //至關於vue中計算屬性computed的做用
    },
    mutations: {
        //當strict爲true,v在外面直接更改state數據池裏的值會報錯，須要在此設置回掉函數進行更改
    },
    actions: {
        //處理異步
    }
})
複製代碼

strict

• true爲開啓嚴格模式
• 嚴格模式下，不是由mutation函數引發的數據池裏數據改變，都會報錯
• 不要在發佈環境下啓用嚴格模式!!!

state

export defalut new Vuex.Store({
    state: {
        //公共數據池，在項目的任何組件中均可以拿到數據池中的內容而且可進行更改
        name : 'Angelababy',
        age : 18,
        look : 'beautiful'
    }
})
複製代碼

在組件中取公共數據池中的name值

this.$store.state.name
複製代碼

mapState

取公共數據池中多個值

//首先引入mapState
import { mapState } from 'vuex'

//將要取出的數據在computed裏取出，以下storeName、storeAge、storeLook即爲取出的值
export default {
    computed: mapState({
        storeName: state => state.name,
        storeAge: state => state.age,
        storeLook: state => state.look
    })
}
複製代碼

完美方法

*上述方法缺點爲computed沒法寫其餘的邏輯，因此採用擴展對象的方式，以下：

export default {
    computed: {
        ...mapState(['name','age','look'])
        //或者
        ...mapState({
            storeName: state => state.name,
            storeAge: state => state.age,
            storeLook: state => state.look
        }),
        //其餘業務邏輯
        gender () {
            return 'female'
        }
    }
}
複製代碼

getter

export defalut new Vuex.Store({
    getters: {
        //至關於組件中的計算屬性computed的做用
        newAge (state) {
            return state.name + 1
        }
    }
})
複製代碼

在組件中取公共數據池中的name值

this.$store.getters.newAge
複製代碼

mapGetters

與state中的mapState相同

//引入
import { mapGetters } from 'vuex'

export default {
    computed: {
        ...mapGetters(['newAge'])
        //或者
        ...mapGetters({
            babyNewAge: 'newAge'
        }),
        //其餘業務邏輯
        gender () {
            return 'female'
        }
    }
}
複製代碼

mutation

export defalut new Vuex.Store({
     mutations: {
        //組件中調用改變state中內容的方法
        changeName (state,name) {
            state.name = name;
        }
    },
})
複製代碼

組件中使用

//第一個參數爲調用mutations中的方法
//第二個參數傳入改變的值
this.$store.commit('changeName','Zhao Wei')
複製代碼

*當傳入第三個參數時，會失效，因此傳入的值大於一個時，使用對象形式傳入

export defalut new Vuex.Store({
     mutations: {
        //組件中調用改變state中內容的方法
        changeNameAndAge (state,{name,age}) {
            state.name = name;
            state.age = age;
        }
    },
})
複製代碼

this.$store.commit('changeNameAndAge',{name:'Zhao Wei';age:20})
複製代碼

action

export defalut new Vuex.Store({
    action: {
        
    }
})
複製代碼

*若想在上述changeNameAndAge函數里加入定時器，讓該函數隔一秒再執行改數據，會發現報錯，此時就用到action

*action用來處理異步函數

*Action 函數接受一個與 store 實例具備相同方法和屬性的 context 對象,簡寫爲ctx

export defalut new Vuex.Store({
    action: {
        //ctx至關於state
        changeNameAndAge (ctx,{name,age}) {
            setTimeout ( () => {
                //該changeNameAndAge爲mutation中的函數方法
                ctx.commit('changeNameAndAge',{name,age}) 
            },1000)
        }
    }
})
複製代碼

觸發action裏的函數

this.$store.dispatch('changeNameAndAge',{name:'Zhao Wei',age:20})
複製代碼

mapActions

*同mapState使用方法相同

//引入
import { mapActions } from 'vuex'

export default {
    methods: {
        ...mapActions(['changeNameAndAge'])
    }
}
複製代碼

能夠在其餘地方直接使用changeNameAndAge方法

<div @cilck="changeNameAndAge({name:'Zhao Wei',age: 20})"></div>
複製代碼

模塊關係總圖

上述基礎學習完成後，官網的該圖也能夠清晰明瞭的看懂啦~嘻嘻~

---

在掘金髮布的第一篇文章，初來乍到，前端初學者，請多指教~😁