标签: nuxt

在Nuxt文件(在这里),它说,"你可以选择打破模块文件到单独的文件:state.js,actions.js,mutations.js和getters.js."

我似乎无法找到如何做到这一点的任何例子-大量的打破Vuex店在根级进入的state.js,actions.js,mutations.js和getters.js,和为单独的模块文件,而是打破了模块本身倒没什么.

所以目前我有:

     ??? assets
     ??? components
     ??? store
           ??? moduleOne.js
           ??? moduleTwo.js
           ??? etc...

而我想拥有的是:

     ??? assets
     ??? components
     ??? store
           ??? moduleOne
                 ??? state.js
                 ??? getters.js
                 ??? mutations.js
                 ??? actions.js
           ??? moduleTwo
                ??? etc...

试试这个,/store/moduleOne/state.js我有:

export const state = () => {
    return {
        test: 'test'
    }
};

在/store/moduleOne/getters.js我有:

export const getters = {
    getTest (state) …

在安装和启用了ESlint和Prettier的Nuxt应用程序中，我切换到了Visual Studio Code编辑器。

当我打开.vue文件并按CMD+ Shift+ P 并选择“设置文档格式”时，我的文件根本没有被格式化。

我的 .prettierrc 设置：

{
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

我有很多源代码行，我无法手动设置它们的格式。我究竟做错了什么？

我正在使用带有vuetify的nuxt.我有一个工作轮播组件.我想生成静态文件夹中的.png文件列表.以下使用webpack从目录动态导入图像,然后按照https://webpack.js.org/guides/dependency-management/#context-module-api我的组件如下所示:

 <template>
  <v-carousel>
    <v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
  </v-carousel>
</template>


<script>

  var cache = {};
  function importAll(r) {
    r.keys().forEach(key => cache[key] = r(key));
  }
  var getImagePaths = importAll(require.context('../static/', false, /\.png$/));
  // At build-time cache will be populated with all required modules. 
  export default {
    data: function() {
      return {
        items: getImagePaths
      };
    }
  };
  //     export default {
  //       data() {
  //         return {
  //           items: [{
  //               src: "/52lv.PNG"
  //             },
  //             {
  // …

最近遇到一个奇怪的行为。创建了一个新的Nuxt.js应用程序，而我创建的某些组件并未进行热重装。当我停止开发服务器并进行重新编译时，npm run dev我可以在浏览器中看到更改，但是只要在开发服务器运行时进行保存，它们就不会重新加载。这只是我创建的一些组件所发生的，这使它变得更加烦人。

到目前为止，我已经尝试过：

• 检查我的用户是否具有文件夹中所有必需的读/写权限
• 尝试了不同的nuxt版本
• 创建了一个空白的nuxt项目

运行时出现以下间歇错误之一npm run dev：

EPERM: operation not permitted, mkdir 'D:\projects\my_project\.nuxt\components'

EPERM: operation not permitted, lstat 'D:\projects\my_project\.nuxt

我npm cache clear无济于事。有人将此问题归因于npm安装在某个网络上共享的文件夹，而不是我的情况。

注意：这是一个随机问题。我几个小时后才再次尝试，现在可以了。但是，在提出这个问题时，无论我尝试多少次，它都不会起作用。

任何的想法？

我在我的项目中使用Nuxt.js 1.2,但我想将其更新到最新版本.怎么做？更新版本时需要考虑什么？

Vuetify清除文本字段时，有什么方法可以调用方法？

<v-text-field
    class="mt-2 mb-0"
    clearable
    solo
    v-model="searchQuery"
    append-icon="search"
    @click:append-outer="searchCos"
   label="Nom de compagnies ou mots-clés">
 </v-text-field>

...
onClear() {
doSomethingHere
}

谢谢

弗朗西斯

我正在使用打字稿构建nuxt.js应用程序。这是我的代码：

<script lang='ts'>
    import {Component, Vue} from 'nuxt-property-decorator';
    import {LOCATION} from '~/constants/graphql/location';

    @Component({
        apollo: {
            getLocation: {
                query: LOCATION,
                variables(): object {
                    return {
                        id: 10,
                    };
                },
                prefetch: true,
            },
        },
    })
    export default class Home extends Vue {
    }
</script>

我有错误：

Argument of type '{ apollo: { getLocation: { query: any; variables(): object; prefetch: boolean; }; }; }' is not assignable to parameter of type 'VueClass<Vue>'.

对象文字只能指定已知的属性，而'apollo'在'VueClass'类型中不存在。

我知道它来自TS，但如何解决？

infiniteHandler($state) {
    var next = db
        .collection("posts")
        .orderBy("timestamp", "desc")
        .startAfter(this.lastVisible)
        .limit(3)

    next.get().then(documentSnapshots => {
        //Get the last visible document
        // this.lastVisible =
        // documentSnapshots.docs[documentSnapshots.docs.length - 1]

        if (documentSnapshots.docs.length == 0) $state.complete()
        else {
            this.$store.commit(
                "modules/posts/updateLastVisible",
                documentSnapshots.docs[documentSnapshots.docs.length - 1].data()
                .timestamp
            )
        }

        documentSnapshots.forEach(doc => {
            var post = doc.data()
            post.docID = doc.id
            this.$store.commit("modules/posts/pushPost", post)
        })
        $state.loaded()
    })
}

这是我的无限加载处理程序,它在到达列表末尾时获取新的数据库条目.到目前为止工作正常.

这是我加载页面时的第一次获取

async fetch({ store }){
    if (store.state.modules.posts.posts.length < 5) {
        let posts = []
        await db
            .collection("posts")
            .orderBy("timestamp", "desc")
            .limit(3)
            .get()
            .then(querySnapshot …

我有一个很简单的问题。

在我的nuxt应用程序中，我想基于一个简单的.json文件中的数组中的对象显示项目列表。此外，当单击特定项目时，我想显示该项目的详细视图以及更多数据。想象一下，这是有关汽车的列表，动态路线如下所示：“ cars / ford-500”。

现在，如果我填充一个vuex变量并将其显示在动态路由组件中-因为客户端加载了SEO，所以我没有得到SEO的好处。此外，如果我想使用动态链接刷新页面，则会收到错误消息，因为刷新后存储被删除。另一个选择是传递路由参数，但是在刷新时再次出现错误。

基本上我不想创建100个html页面，我只是想让nuxt-generate用我的.json文件自动完成它，并且我想在重新加载动态路由时显示该列表项的特定数据。我知道nuxt-generate不会查看动态路径，但是配置文件中有一个nuxt-generate属性，可以用来告诉它们循环通过。

非常感谢你的帮助！