Vuex 介绍与使用

最新推荐文章于 2024-07-21 23:32:33 发布

原创最新推荐文章于 2024-07-21 23:32:33 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vuex 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Vuex的状态管理库中的关键概念，包括state（用于定义全局可访问的数据）、getters（作为计算属性，对外提供过滤后的state数据）、mutations（同步更新state）和actions（异步操作数据）。通过这些概念，开发者可以实现组件间的共享状态，并确保数据变更时的响应式更新。了解并掌握Vuex的这些核心功能，对于构建大型Vue.js应用至关重要。

使用
        state:这里面主要定义了需要的属性，只有在这里定义的属性，在使用时才能获取的到,
                无论组件和组件之间的嵌套结构是怎样的，都能共同访问 store 中的数据,
                在其他任何组件中，对 state 中的数据做操作时，当前组件也会随之响应。

        getters:将我们定义的数组进行输出(可以认为是store中的计算属性)，
                来根据代码需求过滤 state 中的数据，向外抛出过滤之后的数据
                只要state中的变量发生了改变，它也会发生变化，不变化的时候，读的缓存
                只是获取而不传参
        mutations :对后台传来的数据进行操作，把我们需要的数据赋值给在state里面定义那个数组里
        actions 这里主要是与后台进行交互，并获取数据，然后传给mutations里面进行操作

vuex的修改值的方式
        this.$store.dispatch("setLocation", data); => 异步操作，例如向后台提交数据
        this.$store.commit("setLocation", data); => 同步操作
setLocation 名字 data 值
获取值
this.$store.getters.address;
         address 名字