vuex-state、getters综合小demo

最新推荐文章于 2023-06-05 20:29:58 发布

小白小白从不日白

最新推荐文章于 2023-06-05 20:29:58 发布

阅读量99

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43285360/article/details/120707106

版权

vue 专栏收录该内容

47 篇文章 5 订阅

订阅专栏

本文介绍了如何在Vue应用中使用Vuex管理共享状态，通过实例展示了getter的计算属性实现。重点讲解了state、mutations和getters的使用，适合前端开发者深入理解状态管理在单页应用中的实践。

摘要由CSDN通过智能技术生成

<script src="js/vue.js"></script>
<!--1.在导入vuex之前必须先导入vue-->
<script src="js/vuex.js"></script>

<div id="app">
        <father></father>
    </div>

    <template id="father">
        <div>
          {{this.$store.getters.formart}}
        </div>
    </template>

    <script>
        // 2.创建vuex对象
        const store = new Vuex.Store({
            //这里的state相当于组件中的data，专门用于保存共享数据的
            state: {
                msg: 'zs'
            },
            //用于保存修改共享数据的方法的
            mutations: {
                /*
                在执行mutations中定义方法时，系统会自动给这些方法传递一个state参数
                state中就保存了共享数据
                */
            },
            getters: {
                /*
                专门保存计算属性
                */
                formart(state) {
                    console.log("getters方法被执行");
                    return state.msg + '--' + "www.zsperson.com";
                }
            }
        });

        Vue.component("father", {
            template: "#father",
            store: store,
            components: {
                "son": {
                    template: "#son",
                },
            }
        });

        let vue = new Vue({
            el: '#app',
            // 这里就是MVVM中的Model
            data: {},
            // 专门用于存储监听事件回调函数
            methods: {},
            //专门用于定义局部组件
            components: {}
            // template: `
            // `
        });
    </script>