最近正在写自己的个人博客项目,所以遇到的问题都会放到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的错误。

Logo

前往低代码交流专区

更多推荐