脚本宝典收集整理的这篇文章主要介绍了Vuex 心得总结，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

Vuex 心得总结

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

一、什么是Vuex

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

二、Vuex 的安装

 npm install vuex

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

脚本宝典总结

以上是脚本宝典为你收集整理的Vuex 心得总结全部内容，希望文章能够帮你解决Vuex 心得总结所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。