Vuex的基本使用(State,Mutation)

vuex的概述

概述：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: { count : 0}
})

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

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

vuex的核心概念

• State
• Mutation
• Action
• Getter

State

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

//创建store数据源，提供唯一公共数据
const store = new Vuex.Store({
      state : {  count : 0 }
})

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

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

在<template>中this.可省略。。。

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

//1 从vuex中按需要导入mapState函数
import { mapState } from 'vuex'

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

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

Mutation

Mutation用于变更store中的数据。

• 只能通过Mutation变更，不可以直接操作store中的数据。
• 通过这种方式虽然操作起来稍微繁琐，但是可以集中监控所有数据变化。

触发Mutation的第一种方式：this.$store.commit

//定义Mutation
const store = new Vuex.Store({
     state: {
         count:0
    },
    mutations: {
        add(state){
         //变更状态
         state.count++
       }
    }
 }) 

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

也可以在触发时传递参数

//定义Mutation
const store = new Vuex.Store({
    state: {
        count:0
      },
    mutations: {
       addN(state, step) {
      //变更状态
       state.count += step
     }
   }
})

//触发Mutation
methods: {
     handle2() {
      //调用commit函数
      //触发mutations是携带参数
     this.$store.commit('addN',3)
  }
}

触发Mutation的第二种方式：

//1 从vuex中按需导入mapMutation函数
import { mapMutationa } from 'vuex'

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

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