Vuex 在工程化中的使用以及state状态属性的使用笔记

Vuex是什么？

引入官方提供的解释，vuex 是专门为 vue.js 设计的一套 状态管理模式 。什么是状态管理模式？说白了就是数据的集中管理。我们在使用 vue.js 时所用到的数据全部抽取出来放在一个state对象下，这样我们在任何组件内都可以访问得到该数据。下面我们通过一个例子来看下 vuex 是如何管理我们的数据的。

首先先通过npm来安装一下vuex：

npm install vuex --save

在项目src目录下新建一个store文件夹(该文件夹不是必须的，你也可以直接新建一个store.js，只要你引入的路径正确即可)，在该文件夹下新建一个 index.js。store文件夹主要是单独管理我们的数据状态，包括行为触发等等。

为了能在所有的组件中共享我们的数据，我们有必要给根实例**入我们的store对象，所以我们在main.js文件中

然后我们就可以在任何组件中去使用我们的数据了，刚才我们把store对象挂载到了根实例下，所以在组件中我们只需要通过以下两种方法去访问我们的数据。

• 在html标签中直接访问：比如 {{ names }}，这种形式我们可通过store对象暴露出的$store.state访问得到. {{ $store.state.names }} 获取得到state对象下的names属性。
• 在js中通过计算属性( computed ) 返回数据。

感谢大家的观看，有空我会多多更新(*￣︶￣)