Vuex

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

使用vuex来管理全局状态

访问共享数据

this.$store.state.count

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

更新共享数据

• 向store触发一个事件

import store from '@/store';export default {  name: 'info',  store,  methods: {    add() {      console.log('add');      store.commit('add');    },  },};

• vuex更新状态

//...export default new Vuex.Store({  state: {    count: 0  },  mutations: {    add() {      this.state.count++;    },  }  // ...});

• 传递参数

this.$store.commit('add', 1)

mutations: {    add (state, step) {      state.count += step    }}

import { mapMutations } from 'vuex'export default {  ...  methods: {    ...mapMutations(['sub']),    handleClick () {      this.sub()    }  }}

• 使用action异步更新数据

actions: {  addAsync (context) {    setTimeout(() => {      // action不能直接修改共享数据      context.commit('add', 1)    }, 1000)  }}// 触发action this.$store.dispatch('addAsync')// action同Mutation一样，也可以通过map引入vue实例

• about组件通过vuex来获取状态

import store from '@/store';  export default {  name: 'about',  store,  data() {    return { count: store.state.count };  },};

getter

getters: {    showNum (state) {      return 'current val:' + state.count    }}

<h2>{{$store.getters.showNum}}</h2>