Question

我现在正在学习Vuex，而且我遇到了一些麻烦。在尝试在我的vuex实例上创建getter时，我尝试从我的某个组件进行渲染时出现此错误：

Getter应该是一个功能但是＆＃34; getters.doubleCounter＆＃34;是20

store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    counter: 10
  },
  getters: {
    doubleCounter: state => {
      return state.counter * 2;
    }
  }
});

MY COMPONENT：

<template>
  <div>
    <p>This is a message from services</p>
    <button v-on:click="increment">+</button>
    <button v-on:click="decrement">-</button>
    {{ counter }}
  </div>
</template>

<script>
  export default {
    computed: {
      counter() {
        return this.$store.getters.doubleCounter;
      },
    },
    methods: {
      increment: function () {
        this.$store.state.counter++
      },
      decrement: function () {
        this.$store.state.counter--
      }
    }
  }
</script>

当我尝试渲染此组件所在的页面时。它在控制台中给出标题错误消息时失败了。任何帮助都会很棒！谢谢！

Answer 1

尝试一下。

# cat /srv/salt/set_rsync_env.sls
environment_variables:
  environ.setenv:
    - name: rsync
    - update_minion: True
    - value:
        USER: "root"
        RSYNC_PASSWORD: "applepen"

# salt 10.8.172.14 state.apply set_rsync_env
10.8.172.14:
----------
          ID: environment_variables
    Function: environ.setenv
        Name: rsync
      Result: True
     Comment: Environ values were set
     Started: 19:15:13.012966
    Duration: 7.606 ms
     Changes:
              ----------
              RSYNC_PASSWORD:
                  applepen
              USER:
                  root

Summary for 10.8.172.14
------------
Succeeded: 1 (changed=1)
Failed:    0
------------
Total states run:     1
Total run time:   7.606 ms

# salt 10.10.70.202 cmd.run 'echo $USER $RSYNC_PASSWORD'
10.10.70.202:
    root applepen

# salt 10.10.70.202 cmd.run '/usr/bin/rsync -avz --delete rsync://10.10.81.71:9999/test /tmp/test/'
10.10.70.202:
    receiving incremental file list

    sent 54 bytes  received 108 bytes  108.00 bytes/sec
    total size is 0  speedup is 0.00

Answer 2

我不确定导致您的错误的是什么，但您当然不应该在变异之外直接操纵state。

您的代码不应该直接将任何内容分配给state属性。例如，这很糟糕

this.$store.state.doubleCounter++

这是你应该拥有的。

＆＃13;

Vue.component('counter', {
  template: `
  <div>
    <p>This is a message from services</p>
    <button v-on:click="increment">+</button>
    <button v-on:click="decrement">-</button>
    {{ counter }}
  </div>
  `,
  computed: {
    counter() {
      return this.$store.getters.doubleCounter;
    },
  },
  methods: {
    increment: function () {
      this.$store.commit('increment')
    },
    decrement: function () {
      this.$store.commit('decrement')
    }
  }
})

const store = new Vuex.Store({
  state: {
    counter: 10
  },
  mutations: {
    increment(state) { state.counter++ },
    decrement(state) { state.counter-- }
  },
  getters: {
    doubleCounter: state => {
      return state.counter * 2;
    }
  }
})

new Vue({
  el: '#app',
  store
})

＆＃13;

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>
<div id="app"><counter/></div>

＆＃13;

Getter应该是一个功能，但是＆＃34; getters.doubleCounter＆＃34;是20 - VUEX ERROR

store.js

MY COMPONENT：

2 个答案: