Vuex 心得總結

Vuex 心得總結

最近使用 vuex 在整個單頁面項目組件間共享數據，如下 demo 經過 vuex 存儲，修改、獲取共享數據。因爲以前沒有使用過 vuex ,有什麼不正確的地方，還請你們指正。

1、什麼是Vuex

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。也就是說 Vuex 用於單頁面應用組件之間的數據共享，在組件嵌套不少層的狀況下，Vue 中父子組件的通訊過程就變得很麻煩，此時使用 Vuex 方便了組件間的通訊。順便說一下 HTML5 提供的數據存取機制 localStorage ，localStorage 存儲的數據存在瀏覽器中，也就是本地磁盤中，localStorage 多數狀況用於頁面之間傳遞數據。Vuex 是將數據存儲在了內存中，每一次刷新頁面，以前存在 Vuex 中的數據就會從新初始化。

2、Vuex 的安裝

npm install vuex

3、Vuex 的使用

新建一個 store.js, 在 store.js 編寫以下代碼：

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

Vue.use(Vuex)

const state = {          // 組件間共享的數據
    list: []
}

const mutations = {      // 修改共享數據
    setList: (state, value) => {    
        state.list = value
    }
}

const getters = {        // 獲取共享數據
    getList: state => {
        return state.list
    }
}

export default new Vuex.Store({
    getters,
    state,
    mutations
})

組件 setlist.vue 文件中修改共享數據

<script>
import { mapMutations } from 'vuex'
export default {
     mounted () {
        this.setList(['hello'])
     },
     methods: {
        ...mapMutations(['setList'])
     }
}
</script>

組件 getlist.vue 文件中獲取共享數據

<script>
import { mapGetters } from 'vuex'
import { mapState } from 'vuex'
export default {
     computed: {
        ...mapGetters(['getList' ])
     },
     mounted () {
        console.log(this.$store.state.list)     // ['hello']
        console.log(this.getList)               // ['hello']
     }
}
</script>

補充：
經過在根實例中註冊 store 選項，該 store 實例會注入到根組件下的全部子組件中，且子組件能經過 this.$store 訪問到。

參考文檔：
https://vuex.vuejs.org/zh-cn/...