【记录】学习Vuex

Vuex

写在前面

本文章属于看视频的学习记录，可能有不清楚的地方，可以去直接看视频，blibli里面的，课程vuex从入门到实战，我觉得还不错，推荐给大家。

1、vuex概述

1.1组件之间共享数据的方式

• 父向子：v-bind属性绑定

• • 子向父：v-on事件绑定

• 兄弟：EventBus：

  $on 接收数据的那个组件
  $emit 发送数据的那个组件

1.2 Vuex是什么：

Vuex 是一个专为 Vue.js
应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex统一管理状态的好处：

• 能够在vuex中集中管理共享的数据，易于开发和后期的维护
• 能够高效的实现组件间的数据共享，提高开发效率
• 存储在vuex中的数据都是响应式的，能够实时保持事件与页面的同步

1.3 什么样的数据适合存储在vuex中

一般情况下，只有组件之间共享的数据，才有必要存储到vuex中，对于组件的私有数据，依旧存储在组件自身的data中就可以了

2、vuex的基本使用

2.1安装vuex依赖包

npm install vuex –save

2.2 导入vuex包

import Vuex from 'vuex'

Vue.use(Vuex)

2.3创建store对象

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

2.4 将store对象挂载到vue实例中

new Vue({
  el:'#app',
  render: h=>h(app),
  router,
  // 将创建的共享数据对象，挂载到vue实例中
  // 所有的组件，就可以直接从store中获取全局的数据了
  store
})

在项目中演示：

创建一个项目：安装vuex，在src下面创建一个store.js文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state:{
  },
  mutations:{
  },
  actions:{
  }
})

在main.js里面引用store

import store from './store'

创建两个组件分别为加和减组件

3、vuex的核心概念

3.1、State

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

//创建store数据源，提供唯一公共数据
const store = new Vuex.Store({
  //state 中存放的就是全局共享的数据
  state: {  count: 0}
})

• 组件访问state中数据的第一种方式：

this.$store,state.全局数据的名称

在加组件中访问全局的count

 <h3>当前最新的count值为{{this.$store.state.count}}</h3>

 组件访问state中数据的第二种方式：

//1、从vuex中按需引用mapState
import {mapState} from 'vuex'

通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性

//2、将全局数据，映射为当前组件的计算属性
computed:{
      ...mapState(['count'])
    }

让减组件里面也使用到全局count：

<template>
  <div>
    <h3>当前最新的count值为{{count}}</h3>
    <button>-1</button>
  </div>
</template>

<script>
import {mapState} from 'vuex'
  export default {
    data() {
      return {
       
      }
    },
     computed:{
      ...mapState(['count'])
    }
  }
</script>

3.2、 Mutation：Mutation用于变更store中的数据

实现加一效果，如何实现

①只能通过Mutation变更store数据，不可以在组件中直接操作store中的数据
②通过这种方式虽然操作起来稍微繁琐，但是可以集中监控所以数据的变化
3.2.1触发 mutations的第一种方式

mutations:{
    add(state){
      //变更状态
      state.count++;
    }
  },

在加组件中：

 <button @click="handle1">+1</button>

 	
methods: {
      handle1(){
        //触发 mutations的第一种方式
this.$store.commit('add')
      }
    }

可以在触发mutations时传递参数

mutations:{
    addN(state,step){
      //变更状态
      state.count += step
    }
  },

 methods: {
      handle1(){
        //触发 mutations的第一种方式
        this.$store.commit('addN',3)
      }
    }

   

3.2.2触发 mutations的第二种方式

 sub(state){
      state.count--
    }

import {mapMutations} from 'vuex'

 methods:{
      ...mapMutations(['sub']),
      handle1(){
         this.sub()
      }
    }

3.3、Action

案例，计数器2
如何实现，当点击按钮时，隔一秒钟，数字加一

Action用于执行异步任务

如果通过异步操作变更数据，必须使用action，但是在action中还是要通过触发mutation的方式间接变更数据

actions:{
    addAsync(context){
      setTimeout(()=>{
        context.commit('add')
      },1000)
    }
  }

3.3.1触发action的第一种方式

 handle(){
       
        //这里的dispatch专门用来触发action函数
         this.$store.dispatch('addAsync')
      }

3.3.2触发action的第二种方式

import {mapAction} from 'vuex'

 methods:{
      ...mapActions(['subAsync','subNAsyn']),
}

2、触发actions异步任务时携带参数

 addNAsync(context,step){
      setTimeout(()=>{
        context.commit('addN',step)
      },1000)
    }

 handle(){
         this.$store.dispatch('addNAsync',4)
      }

3.4、Getter

Getter用于对store中的数据进行加工处理形成新的数据
（注意：不会修改原store的数据，它只起包装作用）
①Getter可以多store中已有的数据加工处理之后形成新的数据，类似vue的计算属性
②store中数据发生变化，Getter的数据也会跟着变化
3.4.1使用Getter的第一种方式

this.$store.getters.名称

3.4.2使用Getter的第二种方式

import {mapGetters} from 'vuex'

 computed:{
    
      ...mapGetters(['showNum'])
     
    },

这时showNum当成是一个计算属性

<h3>{{showNum}}</h3>

总结

State：state提供唯一的公共数据源，所有共享的数据都要统一放到store的state中进行存储
组件访问State使用方法：
1、

this.$store,state.全局数据的名称

2、使用mapState

import {mapState} from 'vuex'

//将全局数据，映射为当前组件的计算属性
computed:{
      ...mapState(['count'])
    }

Mutations：通过Mutation变更store数据，可以集中监控所以数据的变化
组件访问Mutations使用方法：
1、

 methods: {
      handle1(){
        //触发 mutations的第一种方式
        this.$store.commit('addN',3)
      }
    }

2、使用mapMutations

import {mapMutations} from 'vuex'

 methods:{
      ...mapMutations(['sub']),
      handle1(){
         this.sub()
      }
    }

Action：如果通过异步操作变更数据，必须使用action，但是在action中还是要通过触发mutation的方式间接变更数据
组件访问Action使用方法：
1、 直接在绑定的方法里使用

 handle(){
        //这里的dispatch专门用来触发action函数
         this.$store.dispatch('addAsync')
      }

2、使用mapAction

import {mapAction} from 'vuex'

 methods:{
      ...mapActions(['subAsync','subNAsyn']),
}

Getter：Getter用于对store中的数据进行加工处理形成新的数据
组件访问Getter使用方法：
1、

this.$store.getters.名称

2、使用mapGetters

import {mapGetters} from 'vuex'

 computed:{
    
      ...mapGetters(['showNum'])
     
    },