0
点赞
收藏
分享

微信扫一扫

手把手教你如何使用Vuex

alonwang 2022-04-20 阅读 94

Vuex

State

  1. 概念:Stare本质上就是Object对象

  2. 作用:用来存储全局共享的数据

  3. 访问方式:

    1. 在每个Vuez组件中,通过this.$store.state.全局数据名称访问Store中的数据

    2. 基于Vuex提供的mapState辅助函数,可以方便的把Store中指定的数据,映射为当前组件的计算属性

      • 先按需导入赋值函数mapStateimport {mapState} from 'vuex'
      • 把需要的全局数据,映射当前组件的计算属性...mapState(['数据名'])…表示展开
    3. 安装使用
      1.下包
      yarn add vuex@3.6.2适合Vue2开发
      2.导入
      import Vuex from 'Vuex'
      3.安装插件
      Vue.use(Vuex)
      4.创建Store对象(里面存放state数据)
      const store = new Vuex.Store({})
      5.将store挂到Vue实例上

      new Vue({
        store
      }).$mount('#app')
      

Mutation

  1. 作用:本质上是一个JavaScript函数,专门用来修改State中的数据

  2. 通过this.$store.state.cont=1修改count的数据,但是会导致修改来源不明确的问题,不利于调试和后期维护。vue官方也是不建议这样修改

  3. 使用步骤:

    • 在Vuex中定义Mutation方法

       mutations:{
              mutations:{
              	add(state,payload){//由于mutation要修改state的数据,第一个参数永远都是state,
      							//需要传参,第二个参数永远都是payload载荷
                  state.count += payload
           	}
        	 }
          }
      
    • 在组件中调用Mutation方法

  4. Mutation必须是同步函数

载荷(Payload)

  1. Vuex中的载荷就是参数的意思,通过载荷可以提高Mutation方法的通用性

提交载荷

  1. 在组件中,可以通过this.$store.commit()方法的第二个参数来提交载荷(参数)
  2. 因为载荷只能写一个参数,所以我们一般把载荷参数写一个对象。

mapMutations辅助函数

  1. 基于Vuex提供的mapMutations辅助函数,可以方便的把Store中指定的方法,映射为当前组件的methods
举报

相关推荐

0 条评论