Vue的Vuex的store （禁止套娃）

最新推荐文章于 2024-05-06 22:02:20 发布

Jasmine_in_pajamas

最新推荐文章于 2024-05-06 22:02:20 发布

阅读量292

点赞数 1

分类专栏：前端文章标签： vue html

本文链接：https://blog.csdn.net/JustinAndy/article/details/114462386

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

https://vuex.vuejs.org/zh/guide/

仔细读上面官网的介绍就会很清楚，store，state，mutation的关系

根据官网写了一个很简单的小例子，只用到了store，state，mutaion，无需安装vue，vuex，只用引入。

在这里，没有用模块化开发，是组件化开发。小小例子，不成敬意。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vuex"></script>
    <!-- vuex 需要promise的支持 -->
    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
</head>
<body>
    <div id="box">
       
    </div>
    <script>
        Vue.use(Vuex)
        const store = new Vuex.Store({
            //可以通过store.state来获取状态对象
            state:{   
                count:0
            },
            //可以通过commite触发状态改变 ex. store.commit('increment')
            mutations:{
                increment(state){
                    state.count++   
                }
            }
        })
        //vue实例中要有创建好的store
        new Vue({
            el:"#box",
            store:store,
            template:`
            <button @click="increment">赞 {{this.$store.state.count}}</button>`,
            methods:{
                increment(){
                    this.$store.commit('increment')
                }
            }
        })
    </script>
</body>
</html>

Jasmine_in_pajamas

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的Vuex的store （禁止套娃）

https://vuex.vuejs.org/zh/guide/仔细读上面官网的介绍就会很清楚，store，state，mutation的关系根据官网写了一个很简单的小例子，只用到了store，state，mutaion，无需安装vue，vuex，只用引入。在这里，没有用模块化开发，是组件化开发。小小例子，不成敬意。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g
复制链接

扫一扫