Vuex使用

1.Vuex概述

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

父向子传值：v-bind属性绑定

子向父传值：v-on事件绑定

兄弟组件之间共享数据：EventBus

1.2 Vuex是什么

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

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

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

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

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

1.4 什么样的数据适合存储在Vuex中

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

2.Vuex的基本使用

1.安装vuex依赖包

npm install vuex --save

2.导入vuex包

import Vuex from vuex

Vue.use(Vuex)

3.创建store对象

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

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

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

import Vue from 'vue'
import App from './App'
import router from './router'
import { store } from './store'
new Vue({
     el：#el，
     render:h=>h(app),
     router,
     store
})

3.Vuex的核心概念

state

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

const store = new Store({
    state:{ count:0}
})

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

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

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

import {mapState} from 'vuex'
computed:{
    ...mapState(['count'])
}

Mutation

Mutation用于变更Store中的数据

1.只能通过Mutation更改Store数据，不可以直接操作Store中的数据

2.通过这种方式虽然操作起来比较繁琐一些，但是可以集中监控所有数据的变化

//定义Mutation
state:{
   count:0
},
mutations:{
    add(state){
        state.count++
    }，
    addN(state,step){//传参
        state.count+=step
    }
}

触发Mutation第一种方式

 this.$store.commit('add')

触发Mutation第二种方式

import {  mapMutations } from "vuex";
methods: {
    ...mapMutations(["add", "addN"]),
    add1(){
        this.add()
    }
},

Action

如果通过异步变更数据，必须通过Action，而不能使用Mutation，但是在Action中还是要通过Mutation的方式佳变更数据

actions：{
    addAsync(context) {
        setTimeout(()=>{
            context.commit('add')
        },1000)
    },
    addNAsync(context,step) {//传参
        setTimeout(()=>{
            context.commit('addN',step)
        },1000)
    }
}

触发Action第一种方式

this.$store.dispatch('addAsync')

触发Action第二种方式

import {  mapActions } from "vuex";
methods: {
    ...mapActions(["addAsync"]),
    add1(){
        this.addAsync()
    }
},

注：可直接在html代码中调用方法

Getter

1.Getter用于对State中已有数据加工处理之后形成新的数据，类似Vue的计算属性； 2.Store中数据发生变化，Getter的数据也会发生变化

getters:{
    showN(state){
        return '当前N的值是' + state.count
    }
}

使用Getters第一种方式：

this.$store.getters.名称

使用Getters第二种方式：

import {mapGetters} from 'vuex'
computed:{
    ...mapGetters(['showN'])
}