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">
    <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>

猜你喜欢

转载自blog.csdn.net/JustinAndy/article/details/114462386