Vuex

作者: 哎呦呦胖子斌 | 来源:发表于2018-11-29 16:58 被阅读0次

        Vuex是为了保存组件之间共享数据而诞生的,如果组件之间有要共享的数据可以直接挂载到vuex中,而不必通过父子组件之间传值了,如果组件的数据不需要共享,此时这些不需要共享的私有数据没有必要放到vuex中。
        只有共享的数据才有权利放到vuex中;
        组件内部私有的数据,只要放到组件的data中即可。
        Vuex是一个全局共享数据的存储区域,就相当于是一个数据的仓库。

使用方法

1. 安装

npm I vuex –s

2. vue中导入

Vue.use(Vuex);

var store = new Vuex.Store({
  state:{
    count:99
  },
  mutations:{
    incrementGoods(state,num){
      state.count = num;
    }
  },
  getters:{
    changeData:function(state){
      return '当前的数据是' + state.count;
    }
  }
})

3. 挂载到vue组件上

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store
})

4. 使用
数据使用:

{{$store.state.count}}

方法调用:

this.$store.commit('incrementGoods',this.num);

getters使用

this.$store.getters.changeData

注意:
mutations

// 如果想要操作store中的state的值,只能通过调用mutations提供的方法才能操作对应的数据,
    // 不推荐直接操作state中的数据,因为万一导致了数据的紊乱,不能快速定位到错误的位置
    // mutations的参数列表中最多只能支持两个参数,其中参数1是state状态,参数2是通过commit提交过来的参数,
    // 所以如果想要传多个参数的话可以传一个对象

getters

// 这里的getters只负责对外提供数据,不负责修改数据,如果想要修改数据只能通过mutations
  // getters中的方法和组件中的过滤器filters比较类似,他们都没有修改原数据,知识把元数据做了一层包装提供给了调用者
  // getters也和computed比较像,只要state中的数据发生了变化,那么如果getters正好也引用了这个数据机会立即触发getters的重新求值

总结:
1. 如果组件想要直接从state上获取数据,需要通过:this.store.state.参数名 2. state中的数据不能直接修改,如果组件想要修改数据,必须通过mutations提供的方法,需要通过:this.store.commit(‘方法名’,唯一的一个参数)
3. 如果store中state上的数据在对外提供的时候需要做一层包装,那么推荐使用getters,如果需要使用getterss则需要通过:this.$store.getters.方法名

相关文章

  • VUEX基本介绍,包含实战示例及代码(基于Vue2.X)

    VUEX 1 VUEX基本介绍 1.1 官方API 1.2 什么是vuex 1.3 Vuex使用场景 1、Vuex...

  • 【文档笔记】-Vuex

    什么是vuex? vuex文档: https://vuex.vuejs.org/zh/[https://vuex....

  • vuex配置

    vuex配置 目录 vuex的五个核心 配置vuex vuex持久化 一、vuex五个核心概念 State 定义状...

  • Vuex

    安装Vuex cnpm install vuex --save-dev Vuex是什么? 这是[Vuex的官网](...

  • Vuex

    1.Vuex概述 2.Vuex基本使用 3.使用Vuex完成todo案例 1.Vuex概述 Vuex是实现组件全局...

  • vuex

    Vuex介绍: Vuex官网:http://vuex.vuejs.org/ Vuex是实现数据状态管理的技...

  • vuex+axios 的开发流程记录

    相关文档 vuex: https://vuex.vuejs.org/zh/ 是否有必要使用vuex vuex是vu...

  • 2019-06-07

    import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)...

  • 配置 vuex 和 vuex 本地持久化

    配置 vuex 和 vuex 本地持久化 目录 vuex是什么 vuex 的五个核心概念State 定义状态(变量...

  • vuex

    配置 vuex 和 vuex 本地持久化 目录 vuex是什么 vuex 的五个核心概念State 定义状态(变量...

网友评论

      本文标题:Vuex

      本文链接:https://www.haomeiwen.com/subject/fuvfcqtx.html