理解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】
VueJs(14)---理解Vuex
原文地址：https://www.cnblogs.com/qdhxhz/p/9021935.html