vuex的使用

1、安装：

npm install vuex --save

2、引入

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

3、示例：不能直接改变store的状态，要通过mutation中的commit进行提交

3、在store文件夹下创建一个store.js文件（与main.js同目录），在里面定义vuex

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

Vue.use(Vuex)

export default new Vuex.Store({
  // state: 存放变量
  state: {
    count: 1
  },
  // mutation: 存放方法
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

4、在组件中使用的时候可以通过两种方式来注册

（1）第一种注册方法：在组件中把刚才定义好的vuex引入，一般引入名默认为store

<template>
  <div class="hello">{{state.count}}</div>
</template>

<script>
import store from '../vuex-store.js'
export default {
  name: 'HelloWorld',
  // 变量通常在计算属性中返回
  computed: {
    state () {
      return store.state
    }
  }
  methods: {
    increase () {
      store.commit('increment')
    }
  }
}
</script>

（2）全局注入store机制：进行store全局注册后，可以不用在需要使用vuex的组件内进行注册，组件能够直接通过this.$store访问到。

访问state：可以通过this.$store.state访问状态。

访问mutation：可以通过this.$store.commit()提交mutaion来同步的改变状态。

分发action：使用this.$store.dispatch()分发action，这一步通常是异步操作。

获取getters：通过this.$store.getters获取vuex的getters，是对状态的计算属性。

注意：this.$store只能在组件的选项中使用，例如data、methods、computed等。如果在非组件的上下文中（例如在js或vue插件或前置路由守卫等）需要访问vuex，就直接导入并使用store实例即可。

// 假设 store.js 是 Vuex store 的配置文件
import store from './store.js';

// 直接使用 store 实例    
store.commit('setMenuData', res.data)