Vuex轻松入门级(简单易懂篇)

最新推荐文章于 2024-10-08 17:48:41 发布

零零西

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量182

点赞数

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

本文链接：https://blog.csdn.net/qq_41905922/article/details/106548490

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vuex学习

组件之间共享数据方式

父向子传值：v-bind 属性绑定
子向父：v-on事件绑定
兄弟组件共享数据: $on接收 $emit发送

在以前数据传递总是很复杂，有时不需要用到也要帮忙传递，有vuex就方便多啦，现在让我们看看这到底是啥吧

Vuex是什么

实现组件全局状态管理的一种机制，可以方便实现组件之间数据共享，将需要共享的数据放在一个专门的容器，需要数据就直接在容器中取，不需要两两联系

能够集中管理共享的数据，易于开发维护
高效实现组件共享数据
存储在vuex数据是响应式的，数据改变时页面结构会自动刷新

共享数据存储在Vuex中，私有数据一般还是存储在组件自身的data中

Vuex基本使用

把大象放进冰箱需要三步，把vuex装入vue使用只需5步

安装vuex依赖包

npm install vuex --save

导入vuex

 import Vuex form 'vuex'  
Vue.use(Vuex) //调用Vuex中install方法，将vuex安装到vue上

创建store对象

 const store =new Vuex.Store({
  //state 中存放全局共享的数据
  state:{count:0}
})

将store对象挂载到vue实例上

在vue初始化时写入，类似router

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

vuex核心

State

提供唯一公共数据源，所有共享的数据都统一放到store中的state存储

const store=new Vue.store({
    state:{
        count:0
    }
})

使用方式

this.$store.state.数据名称，在template中可以省略this
从vuex中按需导入mapState函数,通过导入的函数，将当前组件需要的数据映射为当前组件的computed计算属性,页面调用直接使用{{}}将数据名称引用

import { mapState } from ‘vuex’

computed:{
        ...mapState(['count'])
    }

Mutation

用于变更Store中的数据

只能通过mutation修改数据，不可以直接操作state
可以集中变更共享的数据

使用方式

在mutation定义事件函数

mutations:{
    add(state){
        state.count++
    }
}

在对应组件的处理函数中，使用this.$store.commit(‘add’)调用add函数

handle(){
//调用mutation中的add方法
    this.$store.commit('add')
}

传递参数

mutation中事件第一个函数是自身state，第二个参数为外界传入的参数

addStep(state,step){
    state.count+=step
}

在this.$store.commit()第一个参数为事件名，第二个参数为可传入的值

触发mutations的方式

使用this.$store.commit()调用mutations中的事件函数
从vuex中按需导入mapMutations函数,直接用全局方法调用

import { mapMutations } from 'vuex'
//将mutations函数映射为当前组件的methods
methods:{
    ...mapMutation:(['add','addN','sub'])
}

如果我想让数据延迟执行呢，这时候我们会想到定时器，但是这样数据在后台不能正常更新！使用异步就要用下面的Action啦！
不要在mutations中执行异步操作！！！

Action处理异步任务

如果通过异步操作变更数据，必须使用Action，而不能使用Mutation，但是在Action中还是通过触发Mutation的方式间接变更数据

即事件函数还是定义在mutations中，但是需要异步操作的接到Action，再进行调用

actions:{
    addAsync(context){
        setTimeout(()=>{
            context.commit('add')
        },1000)
    }
}
//触发actions中异步操作
handle(){
    this.$store.dispatch('addAsync');
}

小结：commit函数触发mutations里的函数，dispatch函数触发actions中异步函数，actions中不能直接变更数据

内部事件函数第一个参数为store实例，第二个参数为可以传入的参数,再在内部通过commit第二个参数调用mutations中函数并接受该参数变更数据

addAsync(context,step){
    setTimeout(()=>{
    //使用commit调用mutations修改数据
            context.commit('addN',step)
        },1000)
}

使用方式

使用this.$store.dispatch()调用actions中函数
按需导入mapActions,类似mutations映射到当前组件的methods

import { mapActions } from 'vuex'
methods:{
//在页面点击触发的事件函数可以直接使用‘add’
    ...mapActions(['add'])
}

Getter

对store的数据进行加工处理形成新的数据，不会修改store中的原数据

可以对已有数据加工后形成新数据，类似Vue计算属性
Store中数据变化，Getter也随之变化

new Vuex.Store({
    getters:{
        showNum:state=>{
            return 'the num is ['+state.count+']';
        }
    }
})

使用方式

this.$store.getters.名称–可以在页面中使用{{}}显示
按需导入mapGetters 映射为当前组件的计算属性

import { mapGetters } from 'vuex'
computed:{
    ...mapGetters(['showNum'])
}

总结

Vuex是实现组件全局状态管理，集中管理全局共享的数据
State存放共享数据
mutation修改数据，注意只能在这里修改
Action处理异步任务，最后修改还是需要调用mutations
Getter对数据进行包装，不修改数据，可以作为computed计算属性
每种都有两种使用方式，一种是使用组件$store属性进行调用，另一种是按需导入，其中State和Getter是映射到计算属性，Mutation和Action映射到methods方法中，使用按需导入后可以在调用时直接使用全局名称