VUEX学习使用

1.vuex 概述

vuex 是什么

• Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。

使用Vuex统一管理状态的好处

• 能够在vuex中集中管理共享的数据，易于开发和后期维护

• 能够高效地实现组件之间的数据共享，提高开发效率

• 存储在vuex中的数据都是响应式的，能够实时保持数据与页面顶的同步

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

2.vuex的基本使用

1. 安装vuex依赖包

1. npm install vuex --save

2. 导入并使用vuex

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

3. 创建store对象

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

4. 将store对象挂载到vue中

1. new Vue({
2. el:'#app',
3. rende:h=>h(app),
4. //将创建的共享数据对象，挂在到Vue实列中
5. // 所有的组件，就可以直接从store张获取全局的数据了
6. store
7. })

5. store.js

1. import Vue from 'vue'
2. import Vuex from 'vuec'
4. Vue.use(Vuex)
6. exprort default new Vuex.Store({
7. state:{
9. },
10. mutations:{
12. },
13. actions:{
15. }
16. })

3. Vuex的核心概念

3.1 核心概念概述

• Vuex中的主要核心概念如下

  • State

  • Mutation

  • Action

  • Getter

3.2 State

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

  // 创建store数据源，提供唯一公共数据
  const store = new Vue.Store({

  1. //state中存放的就是全局共享的数据
  2. state:{ count:0 }，
  3. mutations:{},
  4. actions:{}

  })

• 组件中访问State中的第一种方式：this.$store.state.全局数据名称

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

  1. // 1.从vuex中按需导入mapState函数
  2. import { mapState } from 'vuex'
  3. // 通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性
  4. //2. 将全局数据，映射为当前组件的计算属性
  5. computed:{
  6. ...mapState(['count'])
  7. }

3.2 Mutation

Mutation 用于变更State中的数据

• 在Vue中只能(只有) 通过mutation变更Store数据，不可直接操作Store中的数据。

• 通过这种方式虽然操作起来稍微繁琐一些，但是可集中监控所有数据的变化。

• 定义Mutation

• const store = new Vuex Stoee({

  1. state:{
  2. count:0
  3. },
  4. mutations:{
  5. add(state){
  6. //变更数据
  7. state.count++
  8. }
  9. }

  })

• 在组件中调用Store中的Mutation中的方法add

• methods:{

  1. handlel(){
  2. //触发mutations中的add方法第一中方式
  3. this.$store.commit('add')
  4. }

  }

3.3 调用Mutation时传递参数

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

• const store = new Vuex Stoee({

  1. state:{
  2. count:0
  3. },
  4. mutations:{
  5. addN(state,params){
  6. //变更数据状态
  7. state.count+=params
  8. }
  9. }

  })

• 在组件中调用Store中的Mutation中的方法add

• methods:{

  1. handlel(){
  2. //触发mutations中的add方法第一中方式 3就是传递的参数
  3. this.$store.commit('addN',3)
  4. }

  }

3.4 Mutation使用的第二种方式

this.store.commit()是触发mutations的第一种方式，触发mutations的第二种方式是：

1. // 1.从vuex 中按需导入mapMutations函数
2. import { mapMutations } from 'vuex'
3. //通过刚才导入的mapMutations函数，将需要的mutations函数，映射为当前组件的methods函数
4. methods:{
5. ...mapMutations(['add','addN'])
6. }

3.5 Action

Action 用于处理异步任务

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

1. //定义Action
2. const store = new Vuex Stoee({
3. state:{
4. count:0
5. },
6. mutations:{
7. add(state){
8. //变更数据状态
9. state.count+=params
10. }
11. },
12. actions:{
13. addAsync(context，params){ // context 相当于new出来的Store的实列对象
14. setTimeout(()=>{
15. context.commit('add',params) //params为参数 没有参数可以不传
16. },1000)
17. }
18. }
19. })

触发Action里面的方法在组件中使用 this.$store.dispatch('addAsync')

1. //触发action
2. methods:{
3. handle(){
4. //触发actions的第一种方式
5. this.$store.dispatch('addAsync'，3) //3为参数
6. }
7. }

this.$store.dispatch()是触发actions的第一种方式,触发actions的第二种方式是：

1. // 1. 从vuex中按需导入mapActions函数
2. import { mapActions } from 'vuex'
3. //通过刚才导入的mapActions函数，将需要的actions函数，映射为当前组件的methods方法
5. //2.将指定的actions函数，映射为当前组件的methods函数
6. methods：{
7. ...mapActions(['addAsync','addNAsync'])
8. }

3.5 Getter

Getter用于对tore中的数据进行加工处理形成新的数据，Getter不会修改state中的源数据，只有包装state中的源数据，也就是在调用获取state数据时提前给予封装或处理源数据

• Getter可以对Store中已有的数据加工处理之后形成新的数据，类似于Vue的计算属性

• Store中的数据发生变化，Getter的数据也会跟着变化

• 定义Getter

• //定义Getter
  const store = new Vuex Stoee({

  1. state:{
  2. count:0
  3. },
  4. getters:{
  5. showNum(state){
  6. return '当前最新的数量'
  7. }
  8. }

  })

使用Getter的第一种方式:

1. this.$store.getters.名称

使用Getter的第二种方式

1. import { mapGetters } from 'vuex'
2. computed:{
3. ...mapGetters(['showUnm'])
4. }