Vuex基本使用

Store配置共享的数据

  state: {
    count: 0,
  },

在组件访问两种方式（可以通过这种方法修改state数据但不推荐）

   <h1>当前count :{{ $store.state.count }}</h1>
    <h1>当前count :{{ count }}</h1>

在mutation定义一些方法来修改count值，可以对外接收参数，外部组件通知一些操作调用该方法，注意只能通过调用mutation里的方法修改state数据

  mutations: {
    addFn(state, step) {
      if (!step) {
        state.count ++
      }else{
        state.count+=step
      }
    },
    sub(state) {
      state.count--
    },
  },

组件调用(通知)mutation修改state数据

<template>
  <div>
    <h1>当前count :{{ $store.state.count }}</h1>
    <h1>当前count :{{ count }}</h1>
    <button @click="add">自增</button>
    <button @click="add1">+3</button>
  </div>
</template>

  methods: {
    add() {
      this.$store.commit('addFn')
    },
    add1() {
      this.$store.commit('addFn', 3)
    },
  },

组件调用的第二种方法

//mutation中
  mutations: {
    sub(state) {
      state.count--
    },
  },   
//组件中
<h1>当前count :{{ $store.state.count }}</h1>
    <h1>当前count :{{ count }}</h1>
    <button @click="subs">-1</button>

import { mapMutations } from 'vuex' 

 methods: {
    ...mapMutations(['sub']),
    subs() {
      this.sub()
    },
  },

异步的任务放在action里,组件通过dispatch触发action的addAsync方法，该方法又通知mutation调用addFn方法，组件可以携带参数

 <h1>当前count :{{ $store.state.count }}</h1>
//vuex配置
  mutations: {
    addFn(state, step) {
      if (!step) {
        state.count++
      } else {
        state.count += step
      }
    },
  },
  actions: {
    addAsync(context) {
      setTimeout(() => {
        // 必须通过mutation修改state数据,调用mutation的addFn方法
        context.commit('addFn',val)
      }, 800)
    },
//组件里
methods: {
    // 异步
    addAsy(){
      // dispatch表示触发某个action
        this.$store.dispatch('addAsync',7) 
    }
  },

触发action的第二种方式(映射)

//在action里
  actions: {
    subAsync(context){
      setTimeout(() => {
        context.commit('sub')
      }, 700);
    }
  },
//在组件
import { mapActions } from 'vuex'
 methods: {
    ...mapActions(['subAsync']),
}
//映射action后直接使用该action定义的方法
<template>
  <div>
    <h1>当前count :{{ $store.state.count }}</h1>
    <button @click="subAsync">异步减一</button>
  </div>
</template>

Getters不修改state数据相当于包装器

//通过$store.getters.showNumber访问
<h3>当前count(getters返回) :{{ $store.getters.showNumber }}</h3>   
getters: {
    showNumber(state){
      return '不修改state数据'+state.count
    }
  },
 

Getters映射法

  getters: {
    showNumber(state){
      return '不修改state数据'+state.count
    }
  },
    import { mapGetters } from 'vuex'
//在计算属性中映射
    computed: {
    ...mapGetters(['showNumber'])
  },
//直接使用
    <h3>当前count(getters返回--2) :{{ showNumber }}</h3>