vuex中从接口获取数据，并渲染到页面

vuex中从接口获取数据，并渲染到页面

在vue中，有时候要使用vuex来处理项目中的一些接口问题，于是简单测试了一下，以下是我的方法，如有错误，请指出。

1.首先，新建一个文件夹，如图，在新建一个index.js文件，内容填写在里面，因为我的项目并不完整，所以使用的vuex属性并不多。

2.在vue官网中引入vuex，这里我使用的是npm安装，npm安装需要在index.js写入以下的代码。

3.导入封装好的api接口函数，这里的接口封装我就不详细讲解，因为我需要引入三个接口，所以就在index.js引入了三个，需要注意的是，接口名一定要和你封装调用的接口名一致。

这是getapi.js文件

4.实例化vuex配置对象，并导出

export default new Vuex.Store({
})

5.state封装状态，在store文件夹下新建一个state.js,初始化数据

6.vuex中为了代码看起来简洁清晰，常常使用常量替代Mutation事件类型。新建mutation-type.js，自定义常量名。

7.mutations更改状态的逻辑，同步操作。在store文件夹下新建一个mutations.js

8.actions – 提交mutation，异步操作，因为我接口中需要经纬度数据，所以我在这里直接将经纬度写死，测试一下。

9.在index.js导入state，mutations，mutation-type文件

10.在index.js配置对象里引入state，mutations

11.在App.vue里调用

12.在需要渲染的页面导入辅助函数

13.测试有没有拿到数据

如果拿到数据，可以通过v-for循环遍历数组，精确拿到你想要的数据。