vuex核心API使用用例

最新推荐文章于 2024-06-06 21:23:06 发布

huang100qi

最新推荐文章于 2024-06-06 21:23:06 发布

阅读量444

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/huang100qi/article/details/78650648

vue 专栏收录该内容

19 篇文章

订阅专栏

本文通过一个示例项目介绍如何使用Vue.js的官方状态管理库Vuex进行组件间的状态管理。包括状态定义、获取状态、状态变更、异步操作及组件内状态的响应式更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuex-demo</title>
    <script src="libary/vue.js"></script>
    <script src="libary/vuex.js"></script>
</head>
<body>
<div id="app">
    <h1>{{ msg }}</h1>
    <Counter ref="aa"></Counter>
    <div>&nbsp;{{ userName }}</div>
    <button @click="add">+</button>
    <button @click="minus">-</button>
    <button @click="ride">x</button>
    <button @click="updateName">变名字</button>
    <button @click="getUserName">得到用户名</button>
</div>
<script>
    const Counter = {
        template : `
            <div>
            <div>{{ count }}</div>
            <div>{{ name }}</div>
            </div>
         `,
        computed :  {
            count(){
                return this.$store.state.count;
            },
            name() {
                return this.$store.state.name;
            },
            getUserName() {
                return this.$store.getters.userName;
            }

        }

    };
    const store = new Vuex.Store({
        state : {
           count : 10,
           name : 'Jack'
        },
        getters : {
            userName (state) {
              return 'Hello,'+ state.name;
            }
        },
        mutations : {
           increment (state) {
               state.count ++;
           },
           decrement (state) {
               state.count --;
           },
           getRide (state) {
               state.count = state.count*state.count;
           },
           updateName (state,name) {
               state.name = state.name === 'Jack' ? name : 'Jack';

           }
        },

        actions : {
            getRides (context) {
                context.commit('getRide');
            }
        }
    });
    new Vue({
        el: '#app',
        store,
        data: {
            msg : 'Hello Vuex',
            userName:'',
        },
        components: {
            Counter
        },
        methods : {
            add() {
                this.$store.commit('increment');
            },
            minus() {
                this.$store.commit('decrement');
            },
            updateName() {
                this.$store.commit('updateName','qi.huang');
            },
            ride(){
                this.$store.dispatch('getRides');
            },
            getUserName(){

               this.userName = this.$refs.aa.getUserName;
            }
        }
    });

</script>
</body>
</html>