vuex原理

目录

一、 为啥会出现vuex

二 、什么是vuex

三、 怎么使用vuex

四、vue和vuex比较

五、vuex的五个属性

5.1 state

5.2 mutations

5.3 getters

5.4 Actions

5.5 Modules

六、为啥state里的数据可以实现响应式

七、为啥每个组件都可以拿到state里的数据


一、 为啥会出现vuex

  若是vue内需要传递数据的组件不是父子组件关系或者两组件之间隔了很多其他组件,这时再通过上面的几种方式传递数据就会十分困难。于是有了vuex,我们可以把要共享的数据都存放到vuex中的state属性里,通过this.$store.state就能拿到里面的数据了!

二 、什么是vuex

  可以把vuex理解为一个大仓库,整个vue组件内都可以拿到里面的资源

三、 怎么使用vuex

1、npm install vuex --save

补充:--save和--save -dev的区别

   --save:将保存配置信息到package.json文件中的dependencies节点中,运行时依赖

   --save-dev:将保存配置信息到package.json文件中的devdependencies节点中,开发时依赖

2、导入vuex

import Vuex from 'vuex'

3、安装插件

Vue.use(Vuex)

4、创建实例

const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

5、挂载到vue实例上

export default store
import store from './store'

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

四、vue和vuex比较

 state相当于data,里面定义一些基本数据类型;

 mutations相当于methods,里面定义一些方法来操作state里面的数据;

 actions用来存放一些异步操作;

 getters里存放一些基本数据类型的派生类型,相当于computed

 modules内部仍然可以继续存放一些子store,内部再有五种属性,模块化vuex

五、vuex的五个属性

  分别为state,mutations,actions,getters,modules,一个一个介绍

5.1 state

  vuex采用单一状态树,即用一个对象表示所有的状态数据,state里面存放的数据就是基本状态数据

1、怎样获取state里面的数据呢?

  通过组件内部的computed属性获取

const store = new Vuex.Store({
    state: {
        count:0
    }
})
const app = new Vue({
    //..
    store,
    computed: {
        count: function(){
            return this.$store.state.count
        }
    },
    //..
})

   如果在组件中想要使用state内部的很多数据,按照上面这种写法只能一个一个定义,有啥方法可以快速批量的获取到state里的数据呢?可以使用这个方法:mapState辅助函数

2、怎么使用mapState辅助函数

上代码!

先在组件内导入

import {mapState} from 'vuex'

开始在compute内使用:

   注意这里有三种方式导入:a. count: 'count'

                                              b. count: (state) => {state.count}

                                              c. count: function(state){ return this.data + state.count}

 为啥要把箭头函数和普通函数分开,因为要是在computed里先拿到state里的数据,然后和本组件data内的数据进行一些操作,就得保证函数里的this指向

<template>
  <div id="example">
    <button @click="decrement">-</button>
    {{count}}
    {{dataCount}}
    <button @click="increment">+</button>
    <div>{{sex}}</div>
    <div>{{from}}</div>
    <div>{{myCmpted}}</div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      str: '国籍',
      dataCount: this.$store.state.count
    }
  },
  computed: mapState({
    count: 'count', // 第一种写法
    sex: (state) => state.sex, // 第二种写法
    from: function (state) { // 用普通函数this指向vue实例,要注意
      return this.str + ':' + state.from
    },
    // 注意下面的写法看起来和上面相同,事实上箭头函数的this指针并没有指向vue实例,因此不要滥用箭头函数
    // from: (state) => this.str + ':' + state.from
    myCmpted: function () {
      // 这里不需要state,测试一下computed的原有用法
      return '测试' + this.str
    }
  }),
  methods: {
    increment () {
      this.$store.commit('increment')
    },
    decrement () {
      this.$store.commit('decrement')
    }
  },
  created () {
    // 写个定时器,发现computed依旧保持了只要内部有相关属性发生改变不管是当前实例data中的改变,还是vuex中的值改变都会触发dom和值更新
    setTimeout(() => {
      this.str = '国家'
    }, 1000)
  }
}
</script>
 

  这时又有一个新问题可能产生,如果原先在computed里面有其他的函数,还能直接这样computed: mapState({ })吗?可以使用对象展开符,合并computed里的函数和mapState里定义的数据

3、对象展开符

  先来说说...对象展开符

let arr = [1,2,3]
console.log(...arr) //1,2,3

 mapState是一个函数,它会返回一个对象,用...展开符就会把返回的对象一一放到computed中,与原来computed里定义的函数放在一起,也可以叫做对象混合。

//之前的computed
computed:{
    fn1(){ return ...},
    fn2(){ return ...},
    fn3(){ return ...}
    ........
}
//引入mapState辅助函数之后
 
computed:{
    //原来的继续保留
    fn1(){ return ...},
    fn2(){ return ...},
    fn3(){ return ...}
    ......
    //再维护vuex
    ...mapState({  //这里的...不是省略号了,是对象扩展符
        count:'count'
    })
}

当映射的对象名称和state里面的变量名称相同时,也可以传一个数组

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

4、向state中添加删除新属性

添加必须使用

 方式一:使用Vue.set(obj,"新属性名称","对应的属性值")
 方式二:用新对象对就对象重新赋值   state.obj = {...state.obj, newProp: 123 }

删除必须使用

	使用“delete+某个属性”,满足不了响应式。
	解决办法:Vue.delete(obj,“属性名”)

5.2 mutations

  vuex中只能通过mutations唯一改变state里面的数据(若没有异步操作),mutations的第一个参数是state,第二个参数是传输过来的数据(payload),可省略。

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    //无提交荷载
    increment(state) {
        state.count++
    }
    //提交荷载
    incrementN(state, obj) {
      state.count += obj.n
    }
  }
})

  组件内部

​
//无提交荷载
store.commit('increment')
//提交荷载
store.commit('incrementN', {
    n: 100
    })

​

  通过this.$store.commit('事件类型’),这里的事件类型是mutations里的函数,也可以通过...mapMutations

import { mapMutations } from 'vuex'

export default {
  //..
  methods: {
    ...mapMutations([
      'increment' // 映射 this.increment() 为 this.$store.commit('increment')
    ]),
    ...mapMutations({
      add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
    })
  }
}

5.3 getters

getters接收第一个参数为state,第二个参数为其他getters(可省略)

const store = new Vuex.Store({
    state: {
        count:0
    },
    getters: {
        // 单个参数
        countDouble: function(state){
            return state.count * 2
        },
        // 两个参数
        countDoubleAndDouble: function(state, getters) {
            return getters.countDouble * 2
        }
    }
})

 和state一样也可以在computed属性中获取到getters

const app = new Vue({
    //..
    store,
    computed: {
        count: function(){
            return this.$store.state.count
        },
        countDouble: function(){
            return this.$store.getters.countDouble
        },
        countDoubleAndDouble: function(){
            return this.$store.getters.countDoubleAndDouble
        }
    },
    //..
})

当然也可以使用...mapGetters

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getters 混入 computed 对象中
    ...mapGetters([
      'countDouble',
      'CountDoubleAndDouble',
      //..
    ])
  }
}

5.4 Actions

  Actions里面用于存放一些异步代码,在组件中只能先通过dispatch到actions,再在actions里commit到mutations,最后在mutations里更改state

  注意:action接受的第一个参数是context

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      setInterval(function(){
        context.commit('increment')
      }, 1000)
    }
  }
})
store.dispatch('increment')

5.5 Modules

modules实现vuex模块化,每个模块都有自己的五种属性,甚至嵌套子模块

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

对于模块内部的 mutation 和 getter,接收的第一个参数是模块的局部状态,对于模块内部的 getter,根节点状态会作为第三个参数:

const moduleA = {
  state: { count: 0 },
  mutations: {
    increment (state) {
      // state 模块的局部状态
      state.count++
    }
  },

  getters: {
    doubleCount (state) {
      return state.count * 2
    },
    sumWithRootCount (state, getters, rootState) {
      return state.count + rootState.count
    }
  }
}

六、为啥state里的数据可以实现响应式

class Store {
  constructor (options) {
    // this.vm  = options.state   只是单纯获取state数据,但是数据修改不会更新界面
    /** 借用Vue的双向绑定机制让Vuex中data变化实时更新界面 */
    this.vm = new _Vue({
      data: {
        state: options.state
      }
    })
  }
/* 类的属性访问器
    访问state对象时候,就直接返回响应式的数据
    Object.defineProperty get 同理
  */
  get state () {
    return this.vm.state
  }
}

在data里注入state,使得可以响应式

七、为啥每个组件都可以拿到state里的数据

let Vue
const install = (_Vue) => { 
  Vue = _Vue
  // 使用vue的混入方法,在创建之前,给每个组件都增加$store属性
  Vue.mixin({
    // 创建之前会被执行
    beforeCreate () {
      // 根实例有store属性
      if (this.$options && this.$options.store) {
        this.$store = this.$options.store  
      } else {
      // 根实例上没有的store属性,往父亲节点找
      // new Vue({store}) 这里已经在根组件挂载有store属性
        this.$store = this.$parent && this.$parent.$store 
      }
    }
  })
}
export default {
  install // 给用户提供一个install方法,默认会被调用
}

用vue.mixin混入,在每个组件的beforeCreate生命周期函数,使得每个组件初始化时都会给自身注入一个store属性

热门文章

暂无图片
编程学习 ·

那些年让我们目瞪口呆的bug

程序员一生与bug奋战&#xff0c;可谓是杀敌无数&#xff0c;见怪不怪了&#xff01;在某知识社交平台中&#xff0c;一个“有哪些让程序员目瞪口呆的bug”的话题引来了6700多万的阅读&#xff0c;可见程序员们对一个话题的敏感度有多高。 1、麻省理工“只能发500英里的邮件” …
暂无图片
编程学习 ·

redis的下载与安装

下载redis wget http://download.redis.io/releases/redis-5.0.0.tar.gz解压redis tar -zxvf redis-5.0.0.tar.gz编译 make安装 make install快链方便进入redis ln -s redis-5.0.0 redis
暂无图片
编程学习 ·

《大话数据结构》第三章学习笔记--线性表(一)

线性表的定义 线性表&#xff1a;零个或多个数据元素的有限序列。 线性表元素的个数n定义为线性表的长度。n为0时&#xff0c;为空表。 在比较复杂的线性表中&#xff0c;一个数据元素可以由若干个数据项组成。 线性表的存储结构 顺序存储结构 可以用C语言中的一维数组来…
暂无图片
编程学习 ·

对象的扩展

文章目录对象的扩展属性的简洁表示法属性名表达式方法的name属性属性的可枚举性和遍历可枚举性属性的遍历super关键字对象的扩展运算符解构赋值扩展运算符AggregateError错误对象对象的扩展 属性的简洁表示法 const foo bar; const baz {foo}; baz // {foo: "bar"…
暂无图片
编程学习 ·

让程序员最头疼的5种编程语言

世界上的编程语言&#xff0c;按照其应用领域&#xff0c;可以粗略地分成三类。 有的语言是多面手&#xff0c;在很多不同的领域都能派上用场。大家学过的编程语言很多都属于这一类&#xff0c;比如说 C&#xff0c;Java&#xff0c; Python。 有的语言专注于某一特定的领域&…
暂无图片
编程学习 ·

写论文注意事项

参考链接 给研究生修改了一篇论文后&#xff0c;该985博导几近崩溃…… 重点分析 摘要与结论几乎重合 这一条是我见过研究生论文中最常出现的事情&#xff0c;很多情况下&#xff0c;他们论文中摘要部分与结论部分重复率超过70%。对于摘要而言&#xff0c;首先要用一小句话引…
暂无图片
编程学习 ·

安卓 串口开发

上图&#xff1a; 上码&#xff1a; 在APP grable添加 // 串口 需要配合在项目build.gradle中的repositories添加 maven {url "https://jitpack.io" }implementation com.github.licheedev.Android-SerialPort-API:serialport:1.0.1implementation com.jakewhart…
暂无图片
编程学习 ·

2021-2027年中国铪市场调研与发展趋势分析报告

2021-2027年中国铪市场调研与发展趋势分析报告 本报告研究中国市场铪的生产、消费及进出口情况&#xff0c;重点关注在中国市场扮演重要角色的全球及本土铪生产商&#xff0c;呈现这些厂商在中国市场的铪销量、收入、价格、毛利率、市场份额等关键指标。此外&#xff0c;针对…
暂无图片
编程学习 ·

Aggressive cows题目翻译

描述&#xff1a; Farmer John has built a new long barn, with N (2 < N < 100,000) stalls.&#xff08;John农民已经新建了一个长畜棚带有N&#xff08;2<N<100000&#xff09;个牛棚&#xff09; The stalls are located along a straight line at positions…
暂无图片
编程学习 ·

剖析组建PMO的6个大坑︱PMO深度实践

随着事业环境因素的不断纷繁演进&#xff0c;项目时代正在悄悄来临。设立项目经理转岗、要求PMP等项目管理证书已是基操&#xff0c;越来越多的组织开始组建PMO团队&#xff0c;大有曾经公司纷纷建造中台的气质&#xff08;当然两者的本质并不相同&#xff0c;只是说明这个趋势…
暂无图片
编程学习 ·

Flowable入门系列文章118 - 进程实例 07

1、获取流程实例的变量 GET运行时/进程实例/ {processInstanceId} /变量/ {变量名} 表1.获取流程实例的变量 - URL参数 参数需要值描述processInstanceId是串将流程实例的id添加到变量中。变量名是串要获取的变量的名称。 表2.获取流程实例的变量 - 响应代码 响应码描述200指…
暂无图片
编程学习 ·

微信每天自动给女[男]朋友发早安和土味情话

微信通知&#xff0c;每天给女朋友发早安、情话、诗句、天气信息等~ 前言 之前逛GitHub的时候发现了一个自动签到的小工具&#xff0c;b站、掘金等都可以&#xff0c;我看了下源码发现也是很简洁&#xff0c;也尝试用了一下&#xff0c;配置也都很简单&#xff0c;主要是他有一…
暂无图片
编程学习 ·

C语言二分查找详解

二分查找是一种知名度很高的查找算法&#xff0c;在对有序数列进行查找时效率远高于传统的顺序查找。 下面这张动图对比了二者的效率差距。 二分查找的基本思想就是通过把目标数和当前数列的中间数进行比较&#xff0c;从而确定目标数是在中间数的左边还是右边&#xff0c;将查…
暂无图片
编程学习 ·

项目经理,你有什么优势吗?

大侠被一个问题问住了&#xff1a;你和别人比&#xff0c;你的优势是什么呢? 大侠听到这个问题后&#xff0c;脱口而出道&#xff1a;“项目管理能力和经验啊。” 听者抬头看了一下大侠&#xff0c;显然听者对大侠的这个回答不是很满意&#xff0c;但也没有继续追问。 大侠回家…
暂无图片
编程学习 ·

nginx的负载均衡和故障转移

#注&#xff1a;proxy_temp_path和proxy_cache_path指定的路径必须在同一分区 proxy_temp_path /data0/proxy_temp_dir; #设置Web缓存区名称为cache_one&#xff0c;内存缓存空间大小为200MB&#xff0c;1天没有被访问的内容自动清除&#xff0c;硬盘缓存空间大小为30GB。 pro…
暂无图片
编程学习 ·

业务逻辑漏洞

身份认证安全 绕过身份认证的几种方法 暴力破解 测试方法∶在没有验证码限制或者一次验证码可以多次使用的地方&#xff0c;可以分为以下几种情况︰ (1)爆破用户名。当输入的用户名不存在时&#xff0c;会显示请输入正确用户名&#xff0c;或者用户名不存在 (2)已知用户名。…