学习笔记Vue（二十二）—— 使用vuex组件通信（state&mapState getter&mapGetter）

使用vuex进行组建间通信：

可以把vuex看作一个仓库，每一个组件都从仓库里去拿这同一个数据，一个组件的数据更改了，别的也都更改了，便于组件间信息的共享。
安装vuex指令：vue add vuex
安装完成后会发现文件列表多了一个叫store.js的文件，这个就是vuex的文件。
store.js:

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

Vue.use(Vuex)    //通过$store去获取到vuex中的state   $store.state.name 

export default new Vuex.Store({
  state: {
      name: 'grandmaz',
      age: 22,
      studentList: []
  },
  mutations: {

  },
  actions: {

  }
})

可以把想要在组建间共享的变量，写在state里，Vue.use(Vuex) 会产生一个$store对象，通过$store.state.name，就能在你的组件里拿到vuex里的值。

一、state

export default {
        data (){
            return {
                // name: this.$store.state.name  //并不一起改变
                name: '',
                age: null
            }
        },
        computed: {
             name () {
                 return this.$store.state.name;  //放在计算属性里，一起改变
             },
             age (){
                 return this.$store.state.age;
             }
        },
 }

如果你直接把值赋值给你组件data里的属性，那么再去引用的时候用的还是相当于你自己在data里创建的属性值，别的组件里的值不会一起变化，但是放到计算属性里，就可以达成组件间共享数据的效果。

mapState

除了用state，还可以用mapState来获取vuex中的值，
使用方法：
先 import {mapState} from ‘vuex’; 引用mapState，mapState是一个方法，可以传一个数组为参数，也可传一个对象为参数

1. 参数为数组：

	mapState(['name', 'age']); //数组里放的是你在vuex的state里的属性key值，

2. 参数为对象：

	mapState({
        storeName: state => state.name; //对象里可以是你自己定义的属性名，
        //值是一个函数，参数为state，通过返回state里的值来给你自定义的属性赋值
    })

使用mapState一般将他扩展放在computed计算属性里来使用：

computed: {
       // ...mapState(['age']),
       ...mapState({
           storeName: state => state.name
       })
   },

二、getter

getter相当于vuex的计算属性，

export default new Vuex.Store({
  state: {
      name: 'grandmaz',
      age: 22,
      studentList: []
  },
  getters: {
    person(state) {
      return `姓名：${state.name} 年龄：${state.age}`;
    },
    newStudentList(state){
      return state.studentList.map(student => `姓名：${student.name} 年龄：${student.age}`);
    }
  },
  mutations: {
  },
  actions: {
  }
})

可以通过$store.getters.name来取值，

mapGetters

用法和mapState类似：

computed: {
     ...mapGetters({
         newPerson: 'person'
     })
 },