Vue组件间通信 Vuex的用法解析

上回说到Vue组件间通讯，最后留了一个彩蛋~~~Vuex。Vuex是另一种组件通讯的方法，这节来说说Vuex(store仓库)。

首先Vuex需要安装，安装的方式有很多，在这里就不一一细说了。我是通过npm方式安装的：

npm install vuex --save

安装好之后需要再main.js里全局引入：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)new Vue({el:'#app',store,components: { App },template: '<App/>'})

这样就完成了Vuex的安装。接下来就是Vuex的用法了：

Vuex有五个属性：State、Getter、Mutation、Action、Module。

1. State里放入的是仓库的数据，类似于js里的data：

import Vue from 'vue'
const modules = {
 state:{
 name: '小白'
 }
 namespaced: true
}
export default modules

把Vuex放入src下的store文件里，建一个新的组件modules，然后把他抛出来，被引入所需数据的组件：

<script>
import { mapState }from 'vuex'
export default {
 computed:{
 // name(){
 // return this.$store.state.name
 // }
 ...mapState(['name'])
 },
 mounted(){
 console.log(this.name)
 }
}
</script>

Vuex里的数据需要从计算属性(computed)里获取，我写了两种我常用的方法，都可以接收到数据，在mounted钩子里打印出的数据：

这里只是举个例子教大家如何用，不建议大家向我这样去写，Vuex应该用于所有业务逻辑的数据。不涉及到业务逻辑的，建议大家用上一章的方法：Vue组件间通信。

2. Getters里放入State里数据的扩展数据，可以把它当作计算属性。比如State里有一个数组，就可以从Getters里获取到数组的长度，或是取到对象里面的属性，用法和计算属性类似：

import Vue from ‘vue'
const modules = {
 state:{
 list:[
  {id :1,content: '第一条'},
  {id :2,content: '第二条'}
 ] }，
 getter:{
 listLength: (state)=>{return state.list.length}
 },　　 namespaced: true}export default modules;

我在state里存了一个数组，然后getters计算出state里数组的长度，接下来就是在组件里接收了：

<script>
import { mapGetters } from 'Vuex'
export default {
 compoted:{
 ...mapGetters(['listLength'])
 },
 mounted(){
 console.log(this.listLegth)
 }
}
</script>

打开控制台打印出2，就是list数组的长度。

3. Mutations是保存在仓库的方法，这个方法只能用来改变state里面的数据，而且想要改变state里的数据只能用mutations里的方法，并且它里面的方法只能是同步的：