Vuex的简单实例(1)

Vuex概念

1）官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
2）当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏，以下情况：
a.多个视图依赖于同一状态。
b.来自不同视图的行为需要变更同一状态。
对于问题a，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。
对于问题b，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码
Vuex就解决了这样的情况，把组件的共享状态抽取出来，以一个全局单例模式管理，Vuex 可以帮助我们管理共享状态。
注：如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

Vuex例子

1）创建一个vue项目

vue create vuex-exmple

2）配置项目所需的依赖，vue-router和vuex，进入到项目目录下

npm install vue-router --save
npm install vuex --save

3）配置vue的router例子，为了明确目录，在src下面新建router目录，在router下新建index.js和routes.js：

// routes.js
export default [] // export一个数组

// index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

export default new VueRouter({
	mode: 'history',
	routes
})

// main.js
import router from './router/index'
... //省略其他代码

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

3）新建store.js文件，与main.js同级

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
	state = {
		count: 0  // 定义count
	}
})

export default store

4）在mian.js引入store

// main.js
import store from './store'
... //省略其他代码

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

5）改造App.vue

// App.vue
<template>
  <div id="app">
    count: {{ $store.state.count }}
    count: {{ count }}
  </div>
</template>

<script>
export default {
  name: "app",
  data(){
  	return {
  		count: this.$store.state.count; // 也可以这样获取
  	}
  }
};
</script>

<style>
#app {
  padding: 20px;
}
</style>

运行项目效果图，能成功显示count的值：