vuex的初级使用

1.同步操作—mutations

1.1方法一，在template中用{{state.key}}语法访问store中的数据，通过this.$store.commit触发mutation中的函数，具体如下：
main.js中定义mutation

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
  },
  mutations: {
    addN(state, step) {
      step = step || 1
      state.count += step
    },
    subN(state, step) {
      step = step || 1
      state.count -= step
    }
  },
  actions: {
  },
  modules: {
  }
})

组件中引用vuex数值并用commit触发mutation

<template>
  <div>
    <h3>当前最新的count值为：{{ $store.state.count }}</h3>
    <button @click="addN">+n</button>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    addN() {
     //   this.$store.state.count++  不合法的写法
      this.$store.commit("addN",3)
    },
  },
}
</script>
<style scoped>
</style>

1.2方法二：通过mapstate和mapMutations进行同步操作
main.js同上，组件中代码如下：

<template>
  <div>
    <h3>当前最新的count值为：{{ count }}</h3>
    <button @click="sub">-</button>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex"
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(["count"]),
    //相当于把vuex中的值通过扩展函数映射到了当前的组件，count就相当于是data中的数据。ps:...mapState写在computed中
  },
  methods: {
    ...mapMutations(["subN"]),
     //相当于把vuex中的函数通过扩展函数映射到了当前的组件，subN就相当于是当前vue实例中的函数，通过this.即可访问。ps:...mapMutations写在methods中
    sub() {
      this.subN(5)
    },
  },
}
</script>
<style scoped>
</style>

2.异步操作----actions

main.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
  },
  mutations: {
    //只能同步操作
    addN(state, step) {
      step = step || 1
      state.count += step
    },
    subN(state, step) {
      step = step || 1
      state.count -= step
    }
  },
  actions: {
    //异步处理
    asyncAdd(con,temp) {
      setTimeout(() => {
        con.commit('addN',temp)
        console.log('------------------')
        //commit触发mutation，actions不能直接修改state中的数据
      }, 5000)
    },
    asyncSub(con,step) {
      setTimeout(() => {
        con.commit('subN', step)
      }, 2000)
    }
  },
  modules: {
  }
})

2.1方法一：组件中通过dispatch触发actions

<template>
  <div>
    <h3>当前最新的count值为：{{ $store.state.count }}</h3>
    <button @click="add">+1</button>
    <br />
    <button @click="addN">+n</button>
    <br />
    <button @click="asyncAddN">+n  async</button>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    add() {
      //   this.$store.state.count++  不合法的写法
      this.$store.commit("addN")
    },
    addN() {
      this.$store.commit("addN", 3)
    },
    asyncAddN(){
        //dispatch是用来触发actions的
        this.$store.dispatch('asyncAdd',5)
    }
  },
}
</script>
<style scoped>
</style>

2.2通过mapActions

<template>
  <div>
    <h3>当前最新的count值为：{{ count }}</h3>
    <button @click="Asyncsub">-6 async</button>
    <button @click="asyncSub（6）">-6 async</button>
    //直接在页面中 引用的写法
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions } from "vuex"
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(["count"]),
  },
  methods: {
    ...mapMutations(["subN"]),
    ...mapActions(["asyncSub"]),
    //通过扩展函数将mutations和actions中的函数映射为当前vue实例的方法，通过this.就能直接访问
    sub() {
      this.subN(5)
    },
    Asyncsub() {
      this.asyncSub(6)
      //也可以直接在template的@click中直接引用
    },
  },
}
</script>
<style scoped>
</style>

3.getter的概念及用法

getter用于对store的数据进行加工处理形成新的数据，类似于vue的计算属性；store中的数据发生变化，getter的数据也会跟着变化
main.js

export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    showNum: state => {
      return `当前最新的值为【${state.count}】`
    }
  }

3.1 getter用法一

this.$store.getters.名称

组件中引用

<template>
  <div>
    <p>{{$store.getters.showNum}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {}
}
</script>
<style scoped>
</style>

3.2 getter用法二
mapGetter映射

<template>
  <div>
    <p>{{ showNum }}</p>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex"
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(["count"]),
    ...mapGetters(["showNum"]),
  },
}
</script>
<style scoped>
</style>