vuex的使用（Mutation, Action, Module ）

这是我参与更文挑战的第6天，活动详情查看： 更文挑战”
首先 我们先来讲一下mutation

mutation

概念: 它是更改vuex里面state的唯一方式 每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (callback) 使用方式

//store.js

//先看一下 下面这个案例
import Vue from 'vue'
import Vuex from 'vuex'
//要使用 那肯定是要引入的
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    title: ''
  },
  mutations: {
    //接受的事件名称, 将数据 保存到vuex 
    book(state, plyLode){
        state.title = plyLode　//plyLode  是保存的数据
    }
  }
})

//a模板
<template>  
  <div name='张三' @click='itemClick'>
</template>

<script>
export default {
  name: "a",
  data(){
      return {
          title: '我是传递过来的共享数据'
      }
  },
  methods: {
    itemClick() {
        //   this.$store.commit('事件名',  传递的数据)
      this.$store.commit('book', this.title)
    },
  },
};
</script>

首先我们在ａ模板里面定义了一个ｄｉｖ点击事件，　点击之后会通过ｖｕｅｘ保存我们的数据．

...mapMutations

同样的　Mutations　也支持缩写形式 ...mapMutations使用方式和　之前的state getter一样

<script>
import { mapMutations } from 'vuex'
export default {
  name: a,
  computed: {
      ...mapMutations(['book '])
  },
};
</script>

Action

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

//store.js

//先看一下 下面这个案例
import Vue from 'vue'
import Vuex from 'vuex'
//要使用 那肯定是要引入的
Vue.use(Vuex)

const store = new Vuex.Store({
// 省略其他代码  。。。
  mutations: {
    //接受的事件名称, 将数据 保存到vuex 
    addN(state, plyLode){
        state.num = plyLode　//plyLode  是保存的数据
    }
  }
//定义一个action方法

  actions: {
  
  //定义一个addNasync方法 里面亦两个参数 第一个为固定的 ‘context’， 第二为要传递的参数
      addNasync(context, stpe) {
          setTimeout(() => {
              context.commit('addN', step)
              }, 1000})
      }
})

  methods: {
    itemClick() {
        //   this.$store.dispatch('事件名',  传递的数据)
      this.$store.dispatch('addN', 5)
    },
  },

...mapActions

与之前一样 action的快捷写法为...mapActions

  methods: {
    itemClick() {
        ...mapActions(['addN'])
    },
  },

action是提交mutation来改变状态的，它并不能自己改变状态。只有mutation才能改变状态。