初识Vuex

Vuex方便了无关联组件之间的传值，个人建议先去观看一下官网文档，了解其生态系统，下面就很好上手了。
下面注意官网上的这个生态系统图，会与下面例子一一对应

注意框红的这三个点，组件(Vue Components)想要共享某数据就要调用Dispatch方法来引用Actions，如上图所示。

大家看着有大概印象就行，下面直接上例子(从配置到例子)
步骤1(省略vue-cli的搭建过程)：
安装命令：

npm install vuex --save

步骤2：
在vue脚手架的src文件夹内创建一个文件夹，里面再创建一个文件

文件夹名字和文件名你们随意，但文件就别创建错类型了，是js文件

步骤3：
在刚创建的js文件中写入

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

Vue.use(Vuex)

export default new Vuex.Store({
  //state就如生态系统中的图示，是数据共享，有点类似于data，是直接render数据到页面的，也是生态图中 
   的最后一步
  state: {
    key: 'value'
  },
  //actions如生态图所示，是组件components才能对其进行操作，通过commit方法对mutations进行任务提交
  actions: {
    changeCity (ctx, 组件传过来的参数) {
      ctx.commit('mutations对应的方法名', 组件传过来的参数)
    }
  },  
  //mutations如生态图所示，只有mutations才能修改state内的数据！这很重要
  mutations: {
    mutations对应的方法名 (state, actions传过来的参数) {
      //在这里就可以使用actions传过来的参数赋值给state的参数进行数据渲染了
      state.的key = actions传过来的参数
    }
  }
})

第二种写法(与上面的效果相同，但更推荐这种)

<script>
//这里导入类似与映射引用
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'CityList',
  props: {
    hot: Array,
    cities: Object,
    letter: String
  },
//必须在computed计算属性中引用
  computed: {
    ...mapState({
//这里完成对state的映射，意思就是自定义的currentCity与 state中的city属性进行映射匹配，这个组件就可以直接使用this.currentCity进行操作了
      currentCity: 'city'
    })
  },
  methods: {
    handleCityClick (city) {
      this.changeCity(city)
      this.$router.push('/')
    },
//同理这个也是对Mutations进行映射,可以是数组也可以是对象，这里用数组的方式，意思是对Mutations下的changeCity方法进行映射匹配，这个组件直接用this.changeCity()即可
    ...mapMutations(['changeCity'])
  },
  mounted () {
//忽视这个，这个不重要
    this.scroll = new Bscroll(this.$refs.wrapper)
  }
}
</script>

步骤4：
main.js导入

import store(你自定义的组件名) from '你刚新建的文件夹名即可(放置步骤3文件的文件夹)'

在下面的Vue实例中添加：

直接写store是一种简写方法，如不理解可以写成

new Vue({
  el: '#app',
  router： router,
  store： store(你刚引入的js文件),
  components: { App },
  template: '<App/>'
})

步骤5：
组件可以开始调用了，配置差不多了
若要修改共享值，在方法(methods)内直接这样调用

this.$store.dispatch('actions内对应的方法名', 更改后的值)

若要显示在页面，或者给vue组件内引用

//state对应的key名
this.$store.state.对应的key名

还有一种更规范的引用方法
在需要引用的组件内导入

import { mapState } from 'vuex'
export default {
  name: '组件名',
  computed: {
    ...mapState(['对应state的key'])
  }
}

这样就可以直接在组件内用this.key名直接调用，如...maoState(['num']),那么调用就直接是this.num