Vuex的学习笔记

Vuex的学习笔记

今天学习了Vuex，所以就来记录一下吧

我们传统的传递数据的三种方式是：
父传子: 通过props属性，可以理解为通过v-bind绑定属性的方式进行传值，

子传父: 通过$emit事件函数，可以理解为通过v-on绑定事件的方式进行传递

非父子传递，即兄弟传值： 通过事件车(eventbus)的方式传递，$emit传递参数，$on接收参数

以上三种仅限于小范围的传值使用，大范围传递的话会出现一种很麻烦的情况，这时候可以使用vuex了

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

使用vuex的三大好处：

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

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

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

什么样的数据适合存储在vuex中
一般情况下，只有组件之间共享的数据，才有必要存储到Vuex中，对于组件本身的私有数据，保存到组件自身的data中即可，这个根据实际情况选择的噢，喜欢的话，可以都放在Vuex中的

1. State的介绍
访问State的两种方式，访问的时候必须保证访问的数据对象有被存储在State
(1). 通过$store.state.count(示例)

(2). 通过导入mapState函数，通过计算属性将导入的mapState函数用拓展运算符的方式进行显示

<template>
  <div>
    <h3>当前最新的count值为：{{ count }} </h3>
    <button>+1</button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['count'])
  }
}
</script>

2. Mutation的介绍
Mutation是用来变更Store中的数据
触发Mutation的第一种方式:

//定义Mutations
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    add (state) {
      state.count++
    }
  },
  actions: {
  },
  modules: {
  }
})

//触发Mutations
<template>
  <div>
    <h3>当前最新的count值为：{{ count }} </h3>
    <button @click="handleClick">+1</button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {}
  },
  methods: {
    handleClick () {
      this.$store.commit('add')
    }
  },
  computed: {
    ...mapState(['count'])
  }
}
</script>

可以在触发Mutations时传递参数:
//定义Mutations时，传递一个step参数
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    add (state) {
      state.count++
    },
    addN (state, step) {
      state.count += step
    }
  },
  actions: {
  },
  modules: {
  }
})

//触发Mutations时， 传递参数使用
<template>
  <div>
    <h3>当前最新的count值为：{{ $store.state.count }} </h3>
    <button @click="handleSub">-1</button>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  methods: {
    handleSub () {
      this.$store.commit('addN', -1)
    }
  }
}
</script>

触发Mutation的第二种方式:
this.$store.commit是触发Mutation的第一种方式，触发Mutation的第二种方式就是：
//1.在vuex中按需导入mapMutations 函数
import { mapMutations } from ‘vuex’
//2.通过导入的mapMutations函数，将mutations函数，映射为当前组件的methods方法
methods: {
…mapMutations([‘add’, ‘addN’])
}

使用Mutation变更Store中的数据的两个非常重要的注意点！！！
1. 只能通过Mutation变更store中的数据，不可以直接操作Store中的数据
2. 通过这种方式虽然操作起来稍微繁琐了一些，但是可以集中监控所有数据的变化

3. Action的介绍
Action主要用于处理异步任务
如果通过异步操作变更数据，必须要通过Action，而不能使用Mutation，但是在Action中还是要通过触发Mutation的方式的

//定义Action
actions: {
    addAsync (context) {
      setTimeout(() => {
        context.commit('add')
      }, 1000)
    }
  },

//触发Action
bundleClick3 () {
	// 通过dispath形式进行调用
      this.$store.dispatch('addAsync')
    }

Action携带step参数的形式

//定义Action
addnAsync (context, step) {
      setTimeout(() => {
        context.commit('addN', step)
      }, 1000)
    };

//触发Action
bundleClick4 () {
      this.$store.dispatch('addnAsync', 3)
    }

Action的第二种触发的方式
this.$store.dispatch() 是触发 actions 的第一种方式，触发 actions 的第二种方式：

// 1. 从 vuex 中按需导入 mapActions 函数 
import { mapActions } from 'vuex' 
通过刚才导入的 mapActions 函数，将需要的 actions 函数，映射为当前组件的 methods 方法： 
// 2. 将指定的 actions 函数，映射为当前组件的 methods 函数 
methods: { 
  ...mapActions(['addASync', 'addNASync']) 
} 

Action的注意点：只有 Mutations 可以操作 state 里面定义的数据，如果Action想要操作state里面的数据必须借助Mutations定义的函数

4. Getters的介绍
Getters主要是用于对state中定义的数据进行加工处理，但是需要注意的是getter不会改变state里面的数据，他只是对state的数据进行加工处理罢了

//定义getters
getters: {
    showNum: (state) => {
      return '当前最新的数量是【 ' + state.count + ' 】'
    }
  },

//触发getters
<h3>{{ $store.getters.showNum }}</h3>