Vuex 心得总结

发表于 | 次阅读

最近使用 vuex 在整个单页面项目组件间共享数据，以下 demo 通过 vuex 存储，修改、获取共享数据。由于之前没有使用过 vuex ,有什么不正确的地方，还请大家指正。

一、什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。也就是说 Vuex 用于单页面应用组件之间的数据共享，在组件嵌套很多层的情况下，Vue 中父子组件的通信过程就变得很麻烦，此时使用 Vuex 方便了组件间的通信。顺便说一下 HTML5 提供的数据存取机制 localStorage ，localStorage 存储的数据存在浏览器中，也就是本地磁盘中，localStorage 多数情况用于页面之间传递数据。Vuex 是将数据存储在了内存中，每一次刷新页面，之前存在 Vuex 中的数据就会重新初始化。

二、Vuex 的安装

1
$ npm install vuex

三、Vuex 的使用

新建一个 store.js, 在 store.js 编写如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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 文件中修改共享数据

1
2
3
4
5
6
7
8
9
10
11
<script>
import { mapMutations } from 'vuex'
export default {
     mounted () {
        this.setList(['hello'])
     },
     methods: {
        ...mapMutations(['setList'])
     }
}
</script>

组件 getlist.vue 文件中获取共享数据

1
2
3
4
5
6
7
8
9
10
11
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']
     }
}

补充：
通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。

参考文档

More info: https://vuex.vuejs.org/zh/