vue-cli3中如何使用axios获取本地的json数据

最近正在写自己的个人博客项目，所以遇到的问题都会放到csdn中。

那么开始吧。

首先我们要确定json数据存放的位置，在vue-cli3中，存放静态资源的位置已经变成存放在public文件夹中了，如下图。
所以如果要获取本地的json数据，那么首先要把数据放到这个文件夹下。
由于我在项目中使用了vuex，因此我把aioxs获取数据写在了vuex的actions,如下图，这里在actions中使用axios.get获取本地数据，只需要将json数据的名称写在http://localhost:8080后面即可，vue-cli会自动帮我们找到public文件夹下的articles.json这个文件。在这个地方，获取完数据之后需要通过commit()提交到mutations中，然后在mutations中修改状态state,这是因为我们不能够直接修改state,具体的详情可以看一下官网。

,
那么到这里，其实整个获取数据的准备工作已经完成了，接下来，我们只要在想要获得数据的组件中调用this.$store.dispatch('getArticles')(这里的参数一定要跟actions中定义的函数一致哦，不然是没用的)，就能够触发actions中的getArticles这个函数，然后发送请求获取数据。

这里要注意哦，这个地方的articles是一个计算属性，这个计算属性依赖于this.$store.state_articles,当这个this.$store.state_articles变化的时候，articles也会跟着发生改变，因此如果页面中有使用这个属性，那么相应的页面也会被重新渲染。
那么为什么这里要使用计算属性呢，这是因为我在写这一块的代码的时候，我本来是打算在created这个生命周期中来获取数据,
然后将数据赋值给data中的articles属性的(用了计算属性后就把data删掉了)，结果我发现整个页面都渲染完之后才获取到数据，这导致我的页面没有数据被渲染出来，所以这里改成计算属性后，就算页面渲染比获取数据的速度要快，由于这个articles是个
计算属性，那么就不会造成页面没有数据被渲染了，因此一旦获取到数据，计算属性就会被重新计算，页面的内容也会被重新渲染。

关于vuex的一些操作，如果有不清楚的地方可以看看官网的说明，肯定比我说的要清楚，不过需要注意一点，在导出store的时候，一定要注意Vuex.Store({})这里的S是大写的,如果不小心协程小写的就会报is not a constructor的错误。