每次看完官方文档，一开始都觉得写的真烂，懂了之后，觉得概括的真简练。
是什么？
我就不复制引用官方文档了，Vuex是一个用于管理Vue应用数据的库，可能这样说还是有点抽象。比如我们有两个组件A,B他们同属于一个应用的，但是A，B组件是非父子关，是兄弟组件，但是组件A和组件B都需要用到同一个数据，并且这两个组件都可以修改这个数据。这种情况，可以怎么做呢。搞一个公共的数据库，把这些数据放到这个库里面，其他组件就可以通过这个数据库去获取数据。 既然是个数据库，当然就得有读写数据的方法了,下面详细介绍下Vuex的使用方法。
一句话概况： 就是一个存放和管理数据的库，方便Vue进行数据状态管理
Vuex的使用
Vuex的安装
先要安装Vuex这个库，才能使用
npm install vuex --save
数据放在哪儿呢？放在Vuex的 store里面，每个Vuex最核心的就是store,数据存放在store里面。
创建store
import Vue from 'vue'
import Vuex from 'vuex'
const store = new Vuex.store({
state: {
a: 1
}
})
// 将store注入到根实例中，这样子组件才可访问store
new Vue({
el: '#app',
template: '<App/>',
store: store
})
创建了一个store实例，并向里面存了数据a，数据存放在state里面。
读数据
上面已经创建了一个store，组件该如何读取这个里面的数据？
- this.$store
在组件中读取数据a
<template>
<div>
<p>{{this.$store.state.a}}<p>
</div>
</template>
可以通过 this.$store 读取store即可读取数据。
- 计算属性读取 上面的写法在模板中不够简洁，可以通过计算属性去读取，这样就不用在模板里写表达式了
<template>
<div>
<p>{{getA}}</p>
</div>
</template>
<script>
export default {
computed: {
getA() {
return this.$store.state.a
}
}
</script>
- mapState方法 如果有很多个数据需要读取，那定义很多个计算属性，会很繁琐，所以Vuex提供了一个方法，这个方法，可以帮我们更简洁的去定义多个计算属性。
<template>
<div>
<p>{{age}}</p>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: mapState(['age']) // 将 state.age 映射为 age计算属性
}
</script>
写数据
上面介绍了如何读取store里的数据，那该如何写store里的数据呢。一定要记住一个重要的原则，那就是不能直接修改store里的数据，为什么呢？因为如果随便可以直接修改，这和全局变量有什么区别，又怎么做到状态管理，所以，不能直接修改store里的数据。
- mutations 什么是mutation？可以这样类比理解，我们在一个Vue实例中，是如何去改变数据的，大部分时候都是声明一个methods,然后在这个方法里去处理数据。同样的，在Vuex的实例中，我们将更改state的方法声明在mutations里面。
import Vue from 'vue'
import Vuex from 'vuex'
const store = new Vuex.store({
state: {
a: 1
},
mutations: { // 将更改state的方法声明在mutations里面
addOne() {
a = a + 1
}
})
那组件改如何去通知Vuex需要更改state呢？唯一的方法就是提交一个mutation。
<template>
<div @clikc="changeA">点击改变a</div>
</template>
<script>
exoprt default {
methods: {
changA() {
this.$store.commit('addOne') // 提交addOne这个mutation
}
}
}
</script>
- mapMutation Vuex提供了一个更方便的方式提交mutation，就是通过mapMutation这个方法。
<template>
<div>
<p @click="handelClick">点击改变数据</p>
</div>
</template>
<script>
import {mapMutations} from 'vuex'
export default {
methods:
mapMutations({ mapMutations返回一个对象
handelClick:'addAge' // this.handelClick() 映射为 this.$store.commit('addAge')
})
}
</script>
-
actions Action 类似于 mutation，不同在于：
-
Action 提交的是 mutation，而不是直接变更状态。
-
Action 可以包含任意异步操作。
const store = new Vuex.Store({
state: {
age: 1
},
mutations: {
addAge(n) {
age = age + n
}
},
actions: { // actions监听事件，并提交mutation
changeAge(ctx,n) {
ctx.commit(addAge,n)
}
}
})
<template>
<div>
<p @click='handelClick'>点击改变数据</p>
</div>
</template>
<script>
export default {
methods: {
handelClick(n) {
this.$store.dispatch('changeAge',n) //组件派发 事件和参数给store
}
}
}
</script>
- mapActions Vuex提供了一个方法，可以更方便的分发action,就是mapActions这个方法。
<template>
<div @click="handelClick">点击我改变公共数据</div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
methods: {
...mapActions({
handelClick: 'cityChange' // 将 `this.handelClick` 映射为`this.$store.dispatch('cityChange')`
})
}
}
</script>
getters的使用
- getter基本概念 getter是什么呢？可以类比Vue实例中的计算属性，这个就相当于Vuex中的计算属性。当我们需要对Vuex中的数据做些处理的时候，可以通过这种方式。
const store = new Vuex.Store({
state: {
firstName: 'xiaofei',
lastName: 'zha'
},
getters: { // 定义一个 getter
fullName: function(state) {
return state.firstName + state.lastName
}
}
})
getter的使用
<template>
<div>
<p>{{myfullName}}</p>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
computed: {
myfullName() {
return this.$store.getters.fullName // 通过 $store.getters读取
}
}
}
</script>
- mapGetter Vuex提供的方法，让我们可以更方便的使用getters。
<template>
<div>
<p>{{fullName}}</p>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters([fullName]) // 本质上就是计算属性，只是Vuex提供了API，更简单的语法
}
}
</script>
