理解Vuex
一、Vuex 是什么？
首先我们来分析一种实际开发中用vue.js的场景，你有n个组件，当你改变一个组件数据的时候需要同时改变其它n个组件的数据，那么我想你可能会对 vue 组件之间的通信感到崩溃 。
这个时候vuex作用就来了，它可以集中管理所有组件共享的数据，做到改一个而是全部组件进行同步更新。什么意思呢？
下面用案例说明：
-
单纯依赖于vue.js
-
依赖vue.js，也使用了vuex技术
目的是通过对比引出vuex的概念、优势和劣势。现在开始。
假设一个微小的应用，有一个标签显示数字，两个按钮分别做数字的加一和减一的操作。用户界面看起来是这样的：
1、纯vue.js代码：
<script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app"> <p>{{count}} <button @click="inc">+</button> <button @click="dec">-</button> </p> </div> <script> new Vue({ el:'#app', data () { return { count: 0 } }, methods: { inc () { this.count++ }, dec () { this.count-- } } }) </script>
整个代码结构非常清晰，代码是代码，数据是数据。代码就是放在methods数组内的两个函数inc、dec，被指令@click关联到button上。而data内返回一个属性count，此属性通过{{count}}绑定到标签p内。
2、依赖vue.js，也使用了vuex技术
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vuex"></script> <div id="app"> <p>{{count}} <button @click="inc">+</button> <button @click="dec">-</button> </p> </div> <script> const store = new Vuex.Store({ state: { count: 0 }, mutations: { inc: state => state.count++, dec: state => state.count-- } }) const app = new Vue({ el: '#app', computed: { count() { return store.state.count } }, methods: { inc() { store.commit('inc') }, dec() { store.commit('dec') } } }) </script>
这两个的区别在呢?
1、methods数组还是这两个方法，这和demo1是一样的；但是方法内的计算逻辑，不再是在函数内进行，而是提交给store对象！这是一个新的对象！
2、count数据也不再是一个data函数返回的对象的属性；而是通过计算字段来返回，并且在计算字段内的代码也不是自己算的，而是转发给store对象。再一次store对象！
就是说vuex把组件中的数据和改变数据的方法给抽离出来，进行全局管理，这个时候你改变组件某一数据的时候，改变的全局的数据，那么对于其它通过store.state.count
得到的count数据当然会一起改变咯。
Vuex 就是一个专为 Vue.js 应用程序开发的状态管理模式。这个状态自管理应用包含以下几个部分：
- state，驱动应用的数据源；
- view，以声明方式将 state 映射到视图；
- actions，响应在 view 上的用户输入导致的状态变化。
二、Store
每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：
-
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
-
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } })
现在，你可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：
store.commit('increment') console.log(store.state.count) // -> 1
参考：
链接：到底vuex是什么？
想太多，做太少，中间的落差就是烦恼。想没有烦恼，要么别想，要么多做。上尉【3】
相关文章
