Vuex的使用

Vuex的使用

Vuex概述

• 实现全局状态（数据）管理的机制，实现组件之间的数据共享
• 优点
  • 集中管理数据，易于开发和维护
  • 高效，提高开发效率
  • 响应式，保持数据和页面同步
• 一般只有组件之间共享的数据才存储到vuex中

基本使用

• 安装

  npm i vuex --save

• 导入

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

• 创建store对象

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

• 挂载

  new Vue({
      el: '#app',
      render: h => h(app),
      router,
      store
  })
  

Vuex的核心概念

• State

  • 提供唯一的公共数据源，所有共享数据都存放在State中

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

  //访问State的第一种方式
  this.$store.state.全局数据名称
  

  //访问State的第二种方式
  import {mapState} from 'vuex'
  computed: {
      ...mapState(['count'])
  }
  

• Mutation

  • 在Vuex中，只能通过Mutation变更Store数据
  • 操作繁琐，但可以集中监控所有的数据变化
  • 不要在mutations函数中，执行异步操作
  • 第一种触发方式

  //定义
  const store = new Vuex.Store({
      //state 中存放全局共享数据
      state: {count: 0},
      mutations: {
          add(state) {
              //变更状态
              state.count++;
          }
      }         
  })
  
  

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

  • 触发mutations时传参

  //定义
  const store = new Vuex.Store({
      //state 中存放全局共享数据
      state: {count: 0},
      mutations: {
          addN(state, step) {
              //变更状态
              state.count += step;
          }
      }         
  })
  

  //触发mutations
  methods: {
      handle2() {
          this.$store.commit('addN', 3)
      }
  }
  

  • 第二种触发方式

  import { maoMutations } from 'vuex'
  

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

• Action

  • 用于处理异步任务
  • actions不能直接变更state中数据，只能通过mutations去实现
  • 传参和mutations的实现方式类似

  const store = new Vuex.store({
      // ...省略代码
      mutations: {
          add(state) {
              state.count++
          }
  	},
      actions: {
          addAsync(context) {
              setTimeout(() => {
                  context.commit('add')
              }, 1000)
  		}
      }
  })
  

  //第一种触发方式
  methods: {
      handle() {
          this.$store.dispatch('addAsync')
      }
  }
  
  //第二种触发方式
  import {mapActions} from 'bvuex'
  methods: {
      ...mapActions(['addAsync', 'addNAsync'])
  }
  

• Getter

  • 用于对Store中的数据进行加工处理形成新的数据
  • Store中的数据发生变化，Getter的数据也会跟着变化
  • 类似计算属性

  //定义Getter
  const store = new Vuex.Store({
      state: {count: 0}，
      getters: {
      	showNum: state => {
      		return 'the num is['+ state.count +']'
  		}
  	}
  })
  

  //访问getters的第一种方式
  this.$store.getters.名称
  
  //第二种访问方式
  import { mapGetters } from 'vuex'
  computed: {
      ...mapGetters(['showNum'])
  }
  

参考课程