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/...