Vuex数据共享

Vuex是一个转为Vue项目开发的状态管理模式。包括四个核心概念：state、mutation，action及getter

import Vue from 'vue'  
import Vuex from 'vuex'  
  
Vue.use(Vuex)  
  
export default new Vuex.Store({  
  state: { token: null },  
 mutations: {  
    addToken(state, token) {  
      state.token = token  
    },  
 },  
actions: {  
  addTokenAsync(ctx, token) {  
    setTimeout(() => {  
      ctx.commit('addToken', token)  
    }, 1000)  
  },  
}, 
 getters: {  
    getToken(state) {  
      return state.token  
 },  
 },  
})

State

State提供唯一的公共数据源，所有共享数据统一存放到store的state中；
State中数据访问方式有两种：

• 直接引用：this.$sotre.state.token，可在插值语法中直接使用；
• 映射为计算属性

  import {mapState} from 'vuex'
  
  computed: {
  //  相当于定义了一个名为token的计算属性
  	...mapState(['token'])
  //映射同时指定别名
    ...mapState({stateToken: 'token'})
  
  }

Mutation

Vuex仅运行使用Mutation进行state中数据操作；通过这种方式可以集中监控state数据变化；
Mutation定义方法使用有两种方式：

• 直接引用： this.$store.commit('addToken',token)，进行方法调用
• 映射为方法：

  import {mapMutations} from 'vuex'
  
  methods: {
  
  // 映射后方法名为addToken，可直接当做普通方法调用
  ...mapMutations(['addToken'])
  
  // 映射时指定别名
  ...mapMutations({
   mutationAddToken: 'addToken'
  })
  
  }

Action

Vuex用于定义异步方法调用模块
Action定义的异步方法同样支持两种调用方式：

• 直接引用： ‘this.$store.dispatch(‘addTokenAsync’, token)’进行调用
• 映射为方法：

  import {mapActions} from 'vuex'
  
  methods: {
  
  // 映射后方法名为addToken，可直接当做普通方法调用
  ...mapActions(['addTokenAsync'])
  
  // 映射时指定别名
  ...mapMutations({
   actionAddTokenAsync: 'addTokenAsync'
  })
  
  }

Getter

Getter用于对Store中数据进行加工处理形成新的数据，或者说为包装数据，类似于computed
Getter同样支持两种调用方式：

• 直接引用：this.$store.getters.getToken进行调用
• 映射为计算属性：

  import {mapGetters} from 'vuex'
  
  computed: {
  
  // 映射后方法名为addToken，可直接当做普通方法调用
  ...mapGetters(['getToken'])
  
  // 映射时指定别名
  ...mapGetters({
   getterGetToken: 'getToken'
  })
  
  }