Vuex的核心概念入门必看

最新推荐文章于 2022-07-27 14:34:31 发布

hi__web

最新推荐文章于 2022-07-27 14:34:31 发布

阅读量141

点赞数

分类专栏： web之Vue 文章标签： vue.js 前端经验分享

本文链接：https://blog.csdn.net/hi__web/article/details/107016676

版权

web之Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

以下内容可直接用编辑器打开查看

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vuex的使用</title>
</head>

<body>
    <!-- 
        1.组件之间共享数据的方式:
        父组件向子组件传值:v-bind属性绑定
        子组件向父组件传值:v-on事件绑定
        兄弟组件之间的数据共享:EventBus事件中心

        2.vuex:实现组件全局状态数据管理的一种机制,可以方便实现各个组件之间的数据共享,存储在vuex中的数据都是响应式的


        3.vuex的基本使用
        下载:npm i vuex --save
        导入:import Vuex from 'vuex'
        安装:Vue.use(Vuex)
        创建vuex实例对象:const store =new Vuex.Store({
            state为存储全局共享的数据
            state:{
                a:1
            }
        })
        将实例挂载vue实例中:new Vue({
            el:'#app',
            renser:h=>h(app),
            router,
            stotre
        })



        4.vuex的核心概念:state(唯一公共数据源),mutations(只有它有权利改变state的数据),actions(异步的操作),
        getters(用于对state中的数据进行加工处理形成新的数据,不会直接修改state的数据,只起到包装作用,类似vue的计算属性)
        export default new Vuex.Store({
                state:{
                    a:0
                },
                mutations:{                   
                    add(state,step) {
                        state.a+=step
                    }
                },
                actions:{
                    addAsync(context,step) {
                        setTimeout(()=>{
                            context.commit('add',step)
                        },1000)
                    }
                },
                getters:{
                    show:state => {
                        return '当前最新的数量是"+state.a+" '
                    }
                }
        })
        在组件中访问state中的数据:this.$store.state.全局数据名称(a);注意如果用{{$store.state.a}}this可以省略

        mutations中的数据说明add为事件名,state为固定写法表示state数据源对象,step为接受数据的形参;
        在组件中methods的事件中使用:this.$store.commit('mutations中对应的事件名例add',8)触发,8为传递过去的数据

        actions中的数据说明addAsync为异步事件名,context为固定写法表示mutations事件对象,context.commit固定写法
        表示查找mutations某个事件对象;step为接受数据的形参
        在组件中methods的事件中使用:this.$store.dispatch('异步函数名addAsync',8)来触发,8为传递过去的数据

        getters中的数据说明show为事件说明,state为固定写法表示数据对象,state中的数据发生变化对应 getters中相应包装数据
        也会发生变化
        在组件中使用:this.$store.getters.名称(show),注意如果用{{$store.getters.show}}this可以省略
     -->

</body>

</html>

小结:
state对象为vuex的唯一的公共数据源;
mutations只有它有权利可以改变vuex的公共数据;
actions一般处理异步的操作,想改变公共数据,需要借助mutations来实现;
getters类似vue的计算属性,不能直接改变公共数据,只对公共数据起到包装的作用,而公共数据的变化也会影响其包装出来的数据;
在vue组件中事件调用的时候是可以传递参数的,对应vuex中使用第二个形参接收

结语:如有错误之处,望请不吝赐教