VueX初体验

最新推荐文章于 2024-09-12 16:43:23 发布

y_hh_

最新推荐文章于 2024-09-12 16:43:23 发布

阅读量139

点赞数

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

本文链接：https://blog.csdn.net/y_hh_/article/details/107323092

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

概念

官方的定义是：“Vuex是一个专门为vue.js应用程序开发的状态管理模式”。
具体得说就是将所有vue组件的状态统一到一个对象中，集中管理。这个对象就是store对象。但这个对象与一般的全局对象有两个主要区别

store对象中的状态是响应式的，当store 中的状态发生改变，所对应的组件也会得到高效更新
store中的状态无法直接进行修改，需要显示的提交commit。
下面是store对象的几个属性

Store

state：用来存放各种状态
mutations ：存放对state中状态的一些操作，只能是同步操作
action：可以异步调用mutation中的操作，可以包含异步
getter: 用于读取状态
modules: 用于模块化状态管理，可以将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action等属性

下面是一个简单的demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <title>VueX初体验</title>
    <style>
        .box{
            height: 50vh;
            width: 400px;
            margin: 25vh auto;
        }
        p{
            margin: 5px;
            font-size: 96px;
            text-align: center;
        }
        input{
            margin: 10px ;
            width: 100px;
            font-size: 24px;
        }
    </style>
</head>

<body>
    <div id='app' class="box">
        <p>{{count}}</p>
        <input type="button" value="+" @click='add'/>
        <input type="button" value="-" @click='sub'/>
        <input type="button" value="异步加" @click='asyncFun'/>
    </div>
</body>
<script>
    const store = new Vuex.Store({
        state: {
            num: 0
        },
        getters: {
            
        },
        mutations:{
            add(state){
                state.num++;
            },
            sub(state){
                state.num--;
            }
        },
        actions:{
            asyncFun({ commit } ){
                setTimeout(()=>{
                    commit('add');
                },2000);
            }
        }
    });
    const app = new Vue({
        el: '#app',
        computed: {
            count() {
                return store.state.num
            }
        },
        methods:{
            add:function(){
                store.commit('add');
                /* 相同的功能
                store.commit({
                    type:'add'
                })*/
            },
            sub:function(){
                store.commit('sub')
            },
            asyncFun:function(){
                store.dispatch('asyncFun'); // action 通过store.dispatch 方法触发
            }
        }
    })
</script>

</html>