1.Vuex 是什么？

图解：

image.png
官方介绍

组件通信
在使用Vue进行组件化开发这个。组件通信是一个十分重要的部分。
应用在组件化之后，组件之间必然存在某种联系；组件化意味着协同工作，通常存在着 父子组件、兄弟组件、跨级组件 等组件关系，那么组件之间如何进行协调工作，即组件通信；
在 Vue 中，父子组件的关系可以总结为 props down、events up。

• 父子组件通信：父组件通过 props 向下传递数据给子组件
• 子父组件通信：子组件通过 events 给父组件发送消息。(使用 $on(eventName) 监听事件, 使用 $emit(eventName) 触发事件)
• 非父子组件通信：使用一个空的 Vue 实例作为中央事件总线 。

---

父子，子父 组件之间的通信是很轻松的，通过 props 和 events 即可实现；但是往往我们的应用可能不只有这么简单的层级关系，在多层跨级组件如果通过 props 去传递，那意味着一层一层的往子组件传递，最终你可能不知道当前组件的数据最终来自哪个父组件(当然你可以逆着方向一层一层往上找)，通过 events 事件机制显然也存在着类似的问题。如果你觉得这样也可以接受，你可能不需要 Vuex；但如果你在想有没有什么好的模式优雅的去解决，你可以继续阅读下面的部分。

2.安装并引入vuex

• 首先使用 npm 安装 Vuex

cnpm install vuex -S

---

• 在main.js中引用

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './vuex/store'
import ElementUI from 'element-ui'

Vue.config.productionTip = false

Vue.use(Vuex)
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

image.png

---

• 构建核心仓库 store.js

Vuex 应用的状态 state 都应当存放在 store.js 里面，Vue 组件可以从 store.js 里面获取状态，可以把 store 通俗的理解为一个全局变量的仓库。
但是和单纯的全局变量又有一些区别，主要体现在当 store 中的状态发生改变时，相应的 vue 组件也会得到高效更新。
在src目录下新建vuex目录，在vuex目录下新建store.js文件:

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

Vue.use(Vuex)

const store = new Vuex.Store({
  // 定义状态
  state: {
    author: 'Wise Ray'
  },
  mutations: {
    setAuthor (state, msg) {
      state.author = msg
    }
  }
})

export default store

image.png

• 在vue组件中使用vuex的状态
  src目录下新建pages目录，在pages目录下新建test.vue文件，文件如下：

<template>
  <div style="text-align: left;">
    This is a Test
    <p>
      I am {{author}}
    </p>
    <el-input v-model="authorIn" placeholder="sdsdds"/>
    <el-button slot="append" @click="setAuthorBtn">Ok</el-button>
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
      authorIn: ''
    }
  },
  methods: {
    setAuthorBtn () {
      this.$store.commit('setAuthor', this.authorIn)
    }
  },
  computed: {
    author () {
      return this.$store.state.author
    }
  }
}
</script>

router目录下index.js(如下设置根目录/访问test.vue文件)

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history', // 访问路径不带井号
  routes: [
    {
      path: '/h',
      name: 'HelloWorld',
      // 使用懒加载
      component: resolve => require(['@/components/HelloWorld'], resolve)
    },
    {
      path: '/',
      name: 'test',
      // 使用懒加载
      component: resolve => require(['@/pages/test'], resolve)
    }
  ]
})

效果如下：

image.png
输入数字asshole：
image.png
OK!!!
传送门