Vuex的基础

一、Vuex概述

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

1、什么样的数据适合存储到Vuex中
一般情况下，只有组件之间共享的数据，才有必要存储到Vuex中；对于组件中私有的数据，依旧存储在组件自身的 data中即可。
2、使用Vuex统一管理状态的好处
a、能够在vuex中集中管理共享的数据，易于开发和后期维护
b、能够高效地实现组件之间的数据共享，提高开发效率
c、存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步

二、Vuex的基本使用

1、安装Vuex依赖包

npm install vuex --save

2、导入Vuex包

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

3、创建store对象

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

4、将store对象挂载到vue实例中

import store from './store/store'    //上面通过import导入store.js文件

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

三、Vuex的核心概念

1、State

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

const store = new Vuex.Store({
	state:{
		num: 0 
	}
})

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

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

组件访问State中数据的第二种方式：
（a）从vuex中按需导入mapState函数

import { mapState } from 'vuex'

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

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

（c）此时在html中直接使用num即可

<div> {{ num }} </div>

2、Mutation

Mutation用于变更Store中的数据。
1、只能通过Mutation变更Store中的数据，不可以直接操作Store中的数据；
2、通过这种方式操作起来会稍微繁琐一些，但是可以集中监控所有数据的变化。

3、触发mutations时只能通过commit

//定义Mutation
const store = new Vuex.Store({
	state:{
		num: 0 
	},
	mutations: {
		add(state){
			state.num++
		}
	}
})

触发mutation的第一种方式

handle1() {
	this.$store.commit('add')
}

可以在触发mutations时传递参数：

    state:{
        num: 0
    },
    mutations:{
        add(state){
            state.num++
        },
        addN(state, step){
            state.num += step
        }
    }

触发mutations

  methods:{
     clickHandle1(){
      this.$store.commit('add')
    },
    clickHandle2(){
      this.$store.commit('addN', 3)
    },
  }

触发mutations的第二种方式
a、从vuex中按需要导入mapMutations函数

import { mapMutations } from 'vuex'

b、通过刚才导入的mapMutations函数，将需要的mutations函数映射为当前组件的methods方法：

  methods:{
    ...mapMutations(['add','addN'])
  }

c、在页面里直接使用

<template>
  <div class="hello">
    <button @click="add">num +1</button>
    <button @click="addN(3)">num +N</button>
  </div>
</template>

注意：commit就是触发mutations的函数，mutations中不能写异步函数，原因是页面的数据更改了，但是state的数据没有同步。可以通过vue调试工具devtools查看。

3、Action

**Action用于处理异步任务；**如果需要通过异步操作变更数据，必须通过Action，而不能使用Mutation，但是在Action中还是要通过触发Mutation的方式间接变更数据。

//定义Action，...省略其他代码
actions:{
        addAsync(context){
            setTimeout(() => {
                context.commit('add')
            },2000)
        }
    }

触发Action，第一种方式

methods:{
    clickHandle3(){
      this.$store.dispatch('addAsync')
    },
 }

触发actions异步任务时携带参数： …省略其他代码

actions:{
	addNAsync(context, step){
	   setTimeout(() => {
	        context.commit('addN', step)
	    },2000)
	}
}

触发使用Actions

  methods:{
    clickHandle4(){
      this.$store.dispatch('addNAsync',5)
    },
  }

触发actions的第二种方式
a、从vuex中按需导入mapActions函数

import { mapActions} from 'vuex'

b、将指定的actions函数映射为当前组件的methods函数

...mapActions(['addAsync','addNAsync'])

c、在页面使用

<template>
  <div class="hello">
    <button @click="addAsync">addAsync</button>
    <button @click="addNAsync(4)">addNAsync</button>
  </div>
</template>

注意：
在actions中不能直接修改state中的数据，必须通过xxx.commit()触发某个mutation才行；actions只负责异步操作；dispatch代表触发某个actions

4、Getter

Getter用于对Store中的数据进行加工处理形成新的数据。
①Getter可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性computed；
②Store中的数据发生变化，Getter的数据也会跟着变化。

//定义Getter   ...省略其他代码
getters:{
        showNum: state => {
            return '当前最新的数据是' + state.num 
        }
    }

使用getters的第一种方式

//可以直接在页面内使用
<h3>{{ this.$store.getters.showNum }}</h3>

使用getters的第二种方式

import {  mapGetters} from 'vuex'

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

//页面内直接使用
<h1>{{showNum}}</h1>

注意： Getter不会修改store中的原数据，只是修饰包装一下

注意：
1、...mapState([])， ...mapMutations([])， ...mapActions([])， ...mapGetters(['showNum'])映射过来的函数，可以直接使用，相当于是本页面的函数
2、 如果只是修饰显示数据就在computed中解构就行，涉及到函数处理就在methods中解构就行

说明：该知识点为听课笔记，如有问题请留言