Vue狀態管理：vuex基礎

還是像以前一樣用一個簡單的案例來解釋vuex

首先，新建一個模板demo

vue init webpack-simple demo

我們需要兩個組件：一個輸入組件和一個顯示組件

在src文件夾中新建一個components文件夾，添加一個showInfo.vue

<template>
    <h1>{{ msg }}</h1>
</template>

<script>
export default {
    props: ['msg']
}
</script>

然后，再添加一個changeInfo.vue

<template>
    <input type="text" :value="msg">
</template>

<script>
export default {
    props: ['msg']
}
</script>

修改App.vue：

<template>
  <div>
    <show-info :msg="msg"></show-info>
    <change-info :msg="msg"></change-info>
  </div>
</template>

<script>
import showInfo from './components/showInfo'
import changeInfo from './components/changeInfo'

export default {
  components: {
    showInfo,
    changeInfo
  },
  data() {
    return {
      msg: 'Hello Vue!'
    }
  }
}
</script>

運行起來或許是這樣的：

缺點是信息傳遞仍然是使用綁定:msg="msg"，而且由於vue組件之間傳輸信息的限制，現在修改輸入組件的文本並不會改變顯示組件的值。

現在來使用vuex來傳遞變量信息，首先安裝vuex：

npm install vuex --save

然后在src文件夾下新建vuex文件夾，並添加store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 添加兩個常量state和mutations
const state = {
    msg: 'Hello Vue!'
}

const mutations = {
    changeMessage(state, msg) {
        state.msg = msg
    }
}

// 初始化已經創建的常量
export default new Vuex.Store({
    state: state,
    mutations: mutations
})

注意，在ES6中{state: state, mutations: mutations}可以簡寫為{state, mutations}

然后修改App.vue：

然后，在src/components/showInfo.vue中需要使用計算屬性來代替props：

<template>
    <h1>{{ msg }}</h1>
</template>

<script>
export default {
    computed: {
        msg() {
            return this.$store.state.msg
        }
    }
}
</script>

在changeInfo.vue中需要額外添加changeMsg方法：

<template>
    <input type="text" :value="msg" @keyup="changeMsg">
</template>

<script>
export default {
    computed: {
        msg() {
            return this.$store.state.msg
        }
    },
    methods: {
        changeMsg(e) {
            this.$store.commit('changeMessage', e.target.value)
        }
    }
}
</script>

來看一下運行效果：

然而，現在的代碼是非常不好維護的，想象一下下面兩個場景：

1) 在一個大規模的應用中如果不同的組件都使用了$this.store.state.somevalue，一旦我們修改了somevalue的名字，就需要修改所有用到它的組件。

2) 如果有一個需要計算的值，例如計數器counter，如果其他的組件需要對它執行+1操作的話就得在組件中添加一個單獨的方法，導致代碼冗余。

 

首先，為了解決第一個問題，我們需要在vuex中引入一個getters.js文件：

export default {
    getMessage(state) {
        return state.msg
    }
}

然后在store.js中引入getters.js

然后在兩個組件中修改引用store.state.msg方法

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

遺憾的是this.$store.getters這個符號仍然很長，我們一般都希望使用短一點的名字來表示變量，好消息是vue提供了mapGetters來幫助我們映射變量名，僅僅只需要引入並修改計算屬性：

<!-- showInfo.vue -->
<template>
    <h1>{{ getMessage }}</h1>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    computed: mapGetters(['getMessage'])
}
</script>

不過一個更好的方法是使用對象來代替mapGetters中的數組：

<!-- showInfo.vue -->
<template>
    <h1>{{ msg }}</h1>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    computed: mapGetters({
        msg: 'getMessage'
    })
}
</script>

現在，讓我們來體驗一下這種修改的好處吧。如果我們需要將輸入的所有字母轉化為大寫，只需要做一處修改src/vuex/getters.js：

export default {
    getMessage(state) {
        return (state.msg).toUpperCase()
    }
}

這就像魔法一樣神奇！接着來解決第二個問題。

首先在store.js中添加counter屬性和相應的方法：

因此，在getters.js文件中：

export default {
    getMessage(state) {
        return (state.msg).toUpperCase()
    },
    getCounter(state) {
        return (state.counter)
    }
}

同時，在顯示組件showInfo.vue上顯示counter：

<template>
    <div>
        <h1>{{ msg }}</h1>
        <div>The message was changed {{ counter }} times</div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    computed: mapGetters({
        msg: 'getMessage',
        counter: 'getCounter'
    })
}
</script>

然后，在src/vuex中添加actions.js來管理函數調用的動作：

export default {
    CHANGE_MSG({ commit }, msg) {
        commit('changeMessage', msg)
    },
    ADD_COUNTER({ commit }) {
        commit('addCounter')
    }
}

然后像引用getters.js一樣在store.js中引用actions.js（同樣也用mapActions映射函數名），最后在changeInfo.vue組件中引用這兩個action：

<!-- changeInfo.vue -->
<template>
    <input type="text" :value="msg" 
    @keyup="chMsg($event.target.value)"
    @keyup.enter="addCnt">
</template>

<script>
import { mapGetters } from 'vuex'
import { mapActions } from 'vuex'
export default {
    computed: mapGetters({
        msg: 'getMessage'
    }),
    methods: mapActions({
        chMsg: 'CHANGE_MSG',
        addCnt: 'ADD_COUNTER'
    })
}
</script>

 源碼下載：https://files.cnblogs.com/files/viewts/vuex_demo.zip