vuex 使用文档小结篇

Vuex是什么？

Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel调试、状态快照导入导出等高级调试功能。

安装

直接下载CDN 引用

　　<script src="/path/to/vue.js"></script>
　　<script src="/path/to/vuex.js"></script>

npm　

npm install vuex --save

在一个模块化的打包系统中，您必须显式地通过Vue.use() 来安装Vuex。　　

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

　　Vuex 是一个专为Vue.js 应用程序开发 的状态管理模式，集中式存储管理应用的所有组件状态。

　　状态管理包含以下几个部分状态：

　　　　 state 驱动应用的数据源；

  　　　　view 以生命方式将 state 映射到视图。

   　　　　actions  响应在view 上的用户书输入导致的状态变化。

 帮助我们管理共享状态，中大型单页面应用。

 　　state

　　　　单一状态树 ，Vuex使用单一状态树用一个对象就包含了全部的应用层级状态。

　　　　在Vue 组件中获得Vuex 状态。

　　　　由于Vuex的状态存储是响应式的，从store 实例中读取状态最简单的方法

　　　　就是在计算属性中返回某个状态。

　　　　创建一个Counter 组件　　　

　const Counter = {
　　　　　　　　template: '<div>{{ count }}</div>'
　　　　　　　　computed: {
　　　　　　　　　　count ()｛
　　　　　　　　　　　　return store.state.count
　　　　　　　　　　｝
　　　　　　　　}
　　　　　　}

　　每次 store.state.count 变化的时候，都会重新求取计算属性，并且触发更新相关的DOM

　　　　Vuex 通过 store 选项，提供了一种机制将状态从根组件『注入』到每一个子组件中（需调用 Vue.use(Vuex)）：　　　　　

　const app = new Vue({
　　　　　　　　el:'#app',
　　　　　　　　// 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所 有的子组件
　　　　　　　　store,
　　　　　　　　components: {Counter},
　　　　　　template: '
　　　　　　　　<div class="app">
　　　　　　　　　　<counter></counter>
　　　　　　　　</div>
　　　　　　　　'
　　　　　　})