Vuex 入門到進階

時間 2019-12-13

標籤 vuex 入門進階简体版

原文原文鏈接

先說一下Vuex究竟是什麼？

Vuex 是一個專門爲 vue.js 應用程序開發的狀態管理模式

這個狀態咱們能夠理解爲在 data 中的屬性，須要共享給其餘組件使用的部分

也就是說，咱們須要共享的數據，可使用 vuex 進行統一集中式的管理

喜歡看代碼學習的的可直接下載下方 Demo

https://gitee.com/jiangliyue/...

<br/>vue

Vuex中的五種基本對象

state：存儲狀態（變量）

getters：對數據獲取以前的再次編譯，能夠理解爲 state 的計算屬性，咱們在組件中使用 $store.getters.fun() 調用

mutations：修改狀態，而且是同步的。在組件中使用 $store.commit('操做名',params) 調用

actions：異步操做。在組件中使用 $store.dispatch('操做名') 調用

modules：store 的子模塊，爲了開發大型項目，方便狀態管理而使用的，使用方法和上面同樣

// 常見vuex初始化配置
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        msg: 'hello ',
        username: ''
    },
    getters: {},
    mutations: {},
    actions: {},
    modules: {}
})

<br/>git

在項目中使用 Vuex

將上面初始化的 Vuex 對象引入到 main.js 文件中

// 引入store
import store from '@/store/index'
new Vue({
    store,
    render: h => h(App)
}).$mount('#app')

在組件中使用

<template>
  <div class="hello">
    <h3>{{$store.state.msg}}</h3>
  </div>
</template>

<script>
export default {
    name: 'home',
    created() {
        console.log(this.$store.state)
    }
}
</script>

如今咱們已經可使用 Vuex 中的 state 了，接下來咱們看看如何操做這個屬性

Vuex 提供了 mutations 和 actions 兩種方法來操做 state

mutations（同步操做）

定義 mutations 對象裏的方法，方法裏面的參數，第一個默認爲 state，第二個爲自定義傳入參數。

/**
 * mutations 裏面放置的是咱們操做state對象屬性的方法
 */
const mutations = {
    setMsg(state, name) {
        state.msg = 'hellow' + name
    }
}
export default new Vuex.Store({
    state,
    mutations
})

組件中使用 Vuex 提供的 commit 方法調用 mutations 中咱們自定義的方法

created() {
    this.setSayMsg('your Name')  
},
methods: {
    setSayMsg(name) {
      this.$store.commit('setMsg',name)
    }
}

效果如何你們自行實驗哈~es6

actions（異步操做）

定義 actions 對象裏的方法，方法裏面的參數，第一個是context，它是一個和 store 對象具備相同對象屬性的參數，第二個爲自定義傳入參數。
一般當咱們須要修改多個狀態或者說調用多個 mutations 裏的方法時會用到 actions

/**
 * actions 裏面放置的是咱們調用store對象的方法
 */
const actions = {
    // 常規寫法
    // actionsSetMsg(context, name) {
    //    context.commit('setMsg', name)
    // }
    // 簡化寫法
    actionsSetMsg({ commit }, name) {
        commit('setMsg', name)
    }
}
export default new Vuex.Store({
    state,
    actions
})

組件中使用 Vuex 提供的 dispatch 方法調用 actions 中咱們自定義的方法

created() {
    this.actionsSetSayMsg('your Name')  
},
methods: {
    actionsSetSayMsg(name) {
        this.$store.dispatch('actionsSetMsg',name)
    }
}

最後是 getters，咱們通常使用 getters 來獲取咱們的 state，由於它算是 state 的一個計算屬性，至關於實時監聽狀態變化

定義 getters 對象裏的方法

const getters = {
    getMsg(state) {
        return state.msg
    }
}
export default new Vuex.Store({
    state,
    getters
})

組件中使用

computed: {
    msg() {
        return this.$store.getters.getMsg
    }
}

看到這裏若是上面的用法都能理解，那恭喜你的 Vuex 已經學的很好了！vuex

接下來的是官方提供給咱們使用 Vuex 的一些小技巧

mapState

mapMutations

mapActions

mapGetters

須要明確的是，這些方法只是方便咱們書寫，重點仍是上面的基礎部分

這部分用到了 es6 的擴展運算符，不熟悉的同窗自行百度吧，仍是蠻有用的

用法仍是看下面代碼直接點，主要記住2點

引入都用到擴展運算符，即3個點 '...' ，方式則爲下面 2種模板任選一種

...mapState({
    你在該頁面想用的變量名: '你state對象裏定義的屬性或方法名'
})
// 或者傳入一個數組,此時當前組件調用的變量名與state中定義的方法名一致
...mapState(['你state對象裏定義的屬性或方法名'])

另外記住 ...mapState({...}) 和 ...mapGetters({...}) 放在 computed 計算屬性裏， ...mapMutations({...}) 和 ...mapActions({...})放在methods 方法屬性裏就能夠了

Demo

Git 地址

https://gitee.com/jiangliyue/...

<template>
    <div class="hello">
        <h1>Msg: {{ $store.state.msg }}</h1>
        <h1>Your Name: {{ username }}</h1>
        <h1>mapState Your Name: {{ mapStateName }}</h1>
        <h1>mapGetters Your Name: {{ mapGettersName }}</h1>
        <h1>User Name: <input type="text" v-model="name" /></h1>
        <h1>
            <button @click="save">保存用戶名</button>
            <button @click="mapSave(name)">map 模式</button>
        </h1>
        <h1>
            <button @click="saveAndUpdate">保存用戶名並更新語句</button>
            <button @click="mapSaveAndUpdate(name)">map 模式</button>
        </h1>
    </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
    name: 'HelloWorld',
    data() {
        return {
            name: ''
        }
    },
    computed: {
        username() {
            return this.$store.getters.getUserName
        },
        ...mapState({
            mapStateName: 'username'
        }),
        ...mapGetters({
            mapGettersName: 'getUserName'
        })
    },
    methods: {
        save() {
            // // 粗暴寫法(不推薦，主要不利於維護)
            // this.$store.state.username = this.name

            // 同步寫法 使用 commit 調用 mutations
            this.$store.commit('setUserName', this.name)
        },
        saveAndUpdate() {
            // 異步寫法 使用 dispatch 調用 actions
            // 通常用於須要依次改變多個狀態的流程
            this.$store.dispatch('saveAndUpdate', this.name)
        },
        // 使用 mapMutations, mapActions 來簡化代碼
        // 傳入數組生成一個 this.setUserName(data) 的方法
        // ...mapMutations(['setUserName']),
        // 傳入對象 可從新定義方法名 生成一個 this.mapSave(data) 的方法
        ...mapMutations({
            mapSave: 'setUserName'
        }),
        // 同理 actions 也能夠傳入數組一次性生成多個方法
        ...mapActions({
            mapSaveAndUpdate: 'saveAndUpdate'
        })
    }
}
</script>