应用里的数据，包括获取数据用的方法都可以放在 Store 里面。创建 Vue 项目的时候，我们选择使用 vuex，所有在项目里已经安装好了 vuex 这个包，它可以让我们在应用里创建 Store 管理应用的数据。

在项目的 src/store 目录的下面有个 index.ts，在这个文件里定了一个 store，创建 store 用的是 vuex 里的 createStore 这个函数。

这里我们把执行这个函数返回的东西作为这个模块的默认导出，在应用的 main.ts 这个入口文件里，导入并且使用了这个 store。

再回到这个 store 文件。store 里面有几个属性，一个是 state，它里面的东西就是在应用里需要用的一些数据，mutations 里面的东西是设置 state 用的一些方法。 actions 里面定义的是获取数据用的方法。

也就是，你在 actions 里面定义一些方法，执行它们的时候可以获取到应用需要的数据，得到数据以后，要执行 store 里的 mutations 来设置应用的 state。

下面我们就通过一个简单的例子来理解一下。 先在 state 里面添加两个数据，一个叫 loading，默认让它等于 false，再添加一个 messages，它的值是一个空白的数组，这里可以设置一下这个数组的类型，as Array

然后在 mutations 里定义两个对应的 Mutation，一个用来设置 loading 这个 state，一个设置 messages 这个 state。

添加一个 setLoading，它是一个函数，给它两个参数，第一个是 state，第二个是 data，在函数里面设置一下 state 里的 loading，让它等于 data。

同样的方法，再添加一个 setMessages，接收一个 state，还有一个 data，这个 mutation 设置的是 state 里的 messages ，让它等于一个数组，在这个数组里，先把 state.messages 原有的项目放进来，然后再把 data 参数里的项目放进来。

下面在这个 actions 里面，可以定义一个用来获取数据用的 action ，名字可以随便起，比如 getMessages，第一个参数是个对象参数，这个对象就是 store 实例。我们直接把 store 实例里的 commit 解构出来用一下。提交 mutation ，也就是修改 store 的 state 的时候，会用到 commit 这个方法。

如果你想让这个 action 接收其它的参数，可以继续添加它们。

在这个 action 的一开始，用一下 commit 这个函数，commit 的 mutation 是上面我们定义好的 setLoading，值是 true。这样 setLoading 会把 loading 这个 state 的值设置成 true。

一般在 action 里面都会包含一些异步的动作，比如去请求服务端应用的接口。这里我们用 setTimeout 模拟一下异步动作。

设置一下在 1000 毫秒，也就是 1秒钟以后，再执行一些动作，这里可以再用一下 commit ，提交的是 setLoading 这个 mutation，设置的值是 false。

再用一下 commit ，提交的是 setMessages 这个 mutation。直接设置一组 string 类型的数据，假设这些数据来自某个服务端接口。

下面我们再找个组件用一下 store 里的 state，还有 action 。

打开 src/components 下面的 HelloWorld.vue

在这个组件的脚本里，先从 vuex 里面，导入两样东西，一个是 mapActions ，还有一个是 mapState。它们都来自 vuex。

在组件里添加一个 computed 属性，一个对象，把执行 mapState 返回的值放进来，一个对象，添加一个 loading，对应的是 store 里的 loading 这个 state。再添加一个 messages，对应的是 store 里的 messages。

这样在这个组件里，我们就可以使用 loading 还有 messages 了，这个名字不一定非得跟 store 里的 state 属性名字一致，你可以随便定义这些数据的名字。

在组件里再添加一个 methods 属性，它里面的东西是这个组件里可以使用的一些方法。把执行 mapActions 返回的东西放进来，一个对象参数，添加一个 getMessages 属性，对应的值是 store 里的 getMessages 这个 action。

这样在这个组件里，我们就可以使用 getMessages 这个方法获取数据了。

找到这个组件的模板，先把里面的这些东西全部删除掉。

一组 div，包装的文字是 loading，在元素里用 v-if 判断一下 loading，这样如果 loading 的值是 true，就会在组件的界面上显示一个 loading...

下面用一组 h3 标签。在元素上面用 v-for ，循环输出 messages 这个数组里的项目，括号 item，index，in messages，item 是 messages 里的每个数组项目，index 是当前这个数组项目的索引号。

:key，绑定一个 key，对应的值就是 index，也就是项目的索引号。 然后在元素里面用两组花括号，绑定输出 item 。

这样如果 messages 里面有数组项目，就会在组件里显示这些数组项目的值。

下面再添加一组 button ，按钮文字是 Load messages，在这个 button 元素上绑定一个 click 事件，发生这个事件的时候，执行一下 getMessages ，也就是之前我们在 store 里的那个 action，它的功能就是在 1 秒钟以后得到一组数据，然后用 setMessages 这个 mutation，设置 store 里的 messages 这个 state。

再把组件的这些样式删除掉。

然后回到浏览器，可以测试一下，现在界面上会显示一个 Load messages 按钮，点击按钮，会执行 getMessages，界面上会出现 loading... 1秒钟以后，getMessages 会得到一组数据，这些数据会交给 store 里的 messages。这样就会在组件里循环输出这个 messages 里面的所有的数组项目。