Vue.js 为什么Vuex操作类型未知？

为什么操作类型未知，修复方法是什么？

我知道这是一个常见的问题。我搜索了大约20个答案，其中许多与mapActions有关。在阅读了所有的答案，尝试了无数不同的mapActions语法之后，我仍然无法找出我的代码出了什么问题

我理解，我们应该在组件（或模块）中调用dispatch，然后在Vuex存储中提交一个变异（实际值在这里更改）

另外，我不确定指出这一点是否有帮助，但我希望看到下面状态图中的动作和突变，但没有

更新：

按照其他人的建议编辑代码后，结果仍然是一样的；未知操作类型：toggleIsCategoryWheelSpinning，{}

不确定它是否相关，但是调用dispatch的行是

myStore.dispatch（“toggleIsCategoryWheelSpinning，{}”）位于嵌套函数内



这是我的密码：

 //Wheel.vue

    <template>
    <div >
        <div id="chart"></div>
    </div>
</template>

<script type="text/javascript" charset="utf-8">
import store from 'vuex'
import { mapActions} from 'vuex'

export default {
    name: "wheel",
    props: {
        wheelCategories: {
            type: Array,
            required: true,
        },
        expressions: {
            type: Array,
            required: true,
        },
    },
    data() {
        return {
        };
    },
    mounted() {
        let myscript = document.createElement("script");
        myscript.setAttribute("src", "https://d3js.org/d3.v3.min.js");
        document.head.appendChild(myscript);
        myscript.onload = this.createWheel(this.wheelCategories,this.expressions, this.$store);
    },
    methods: {
        ...mapActions(['toggleIsCategoryWheelSpinning']),   
        created(){
            this.toggleIsCategoryWheelSpinning       
        },

        createWheel: function (wheelCategories,expressions, myStore) {
            var padding = { top: 20, right: 40, bottom: 20, left: 20 },
                w = 500 - padding.left - padding.right,
                h = 500 - padding.top - padding.bottom,
                r = Math.min(w, h) / 2,
                rotation = 0,
                oldrotation = 0,
                picked = 100000,
                oldpick = [],
                color = d3.scale.category20();
            
            var svg = d3
                .select("#chart")
                .append("svg")
                .data([wheelCategories])
                .attr("width", w + padding.left + padding.right)
                .attr("height", h + padding.top + padding.bottom);
            
            var container = svg
                .append("g")
                .attr("class", "chartholder")
                .attr(
                    "transform",
                    "translate(" +
                        (w / 2 + padding.left) +
                        "," +
                        (h / 2 + padding.top) +
                        ")"
                )
                .style({ cursor: "grab" });

            var vis = container.append("g");

            var pie = d3.layout
                .pie()
                .sort(null)
                .value(function (d) {
                    return 1;
                });

            var arc = d3.svg.arc().outerRadius(r);

            var arcs = vis
                .selectAll("g.slice")
                .data(pie)
                .enter()
                .append("g")
                .attr("class", "slice");
            
            arcs.append("path")
                .attr("fill", function (d, i) {
                    return color(i);
                })
                .attr("d", function (d) {
                    return arc(d);
                });

            // add the text
            arcs.append("text").attr("transform", function (d) {
                d.innerRadius = 0;
                d.outerRadius = r;
                d.angle = (d.startAngle + d.endAngle) / 2;
                return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")translate(" + (d.outerRadius -10) +")";
            })
            .attr("text-anchor", "end")
                .text(function (d, i) {
                    return wheelCategories[i].label;                 
                });

            container.on("click", spin);  

            function spin(d) {
                container.on("click", null);
                //the following line gives the "unknown action"
                myStore.dispatch("toggleIsCategoryWheelSpinning,{}");
                console.log('dispatch finished');

                //all slices have been seen, all done
                if (oldpick.length == wheelCategories.length) {
                    document.getElementById("spinResponse"
                    ).innerHTML = `out of spins`;
                    container.on("click", null);
                    return;
                }

                var ps = 360 / wheelCategories.length,
                    pieslice = Math.round(1440 / wheelCategories.length),
                    rng = Math.floor(Math.random() * 1440 + 360);

                rotation = Math.round(rng / ps) * ps;

                picked = Math.round(
                    wheelCategories.length - (rotation % 360) / ps
                );
                picked =
                    picked >= wheelCategories.length
                        ? picked % wheelCategories.length
                        : picked;

                if (oldpick.indexOf(picked) !== -1) {
                    d3.select(this).call(spin);
                    return;
                } else {
                    oldpick.push(picked);
                }

                rotation += 90 - Math.round(ps / 2);

                let index = Math.floor(Math.random() * expressions.length); // 10  returns a random integer from 0 to 9

                vis.transition()
                    .duration(3000)
                    .attrTween("transform", rotTween)
                    .each("end", function () {
                        oldrotation = rotation;
                        container.on("click", spin);
                    });
            }

            //make arrow
            svg.append("g")
                .attr(
                    "transform",
                    "translate(" +
                        (w + padding.left + padding.right) +
                        "," +
                        (h / 2 + padding.top) +
                        ")"
                )
                .append("path")
                .attr(
                    "d",
                    "M-" +
                        r * 0.15 +
                        ",0L0," +
                        r * 0.05 +
                        "L0,-" +
                        r * 0.05 +
                        "Z"
                )
                .style({ fill: "black" });

            //draw spin circle
            container
                .append("circle")
                .attr("cx", 0)
                .attr("cy", 0)
                .attr("r", 60)
                .style({ fill: "white", cursor: "grab" });

            //spin text
            container
                .append("text")
                .attr("x", 0)
                .attr("y", 15)
                .attr("text-anchor", "middle")
                .text("SPIN ME!")
                .style({
                    "font-weight": "bold",
                    "font-size": "25px",
                    cursor: "grab",
                });

            function rotTween(to) {
                var i = d3.interpolate(oldrotation % 360, rotation);
                return function (t) {
                    return "rotate(" + i(t) + ")";
                };
            }

            function getRandomNumbers() {
                var array = new Uint16Array(1000);
                var scale = d3.scale
                    .linear()
                    .range([360, 1440])
                    .domain([0, 100000]);

                if (
                    window.hasOwnProperty("crypto") &&
                    typeof window.crypto.getRandomValues === "function"
                ) {
                    window.crypto.getRandomValues(array);
                    console.log("works");
                } else {
                    //no support for crypto, get crappy random numbers
                    for (var i = 0; i < 1000; i++) {
                        array[i] = Math.floor(Math.random() * 100000) + 1;
                    }
                }

                return array;
            }
        }
    }
    
};

//end code for wheel
</script>

<style type="text/css" scoped>
text {
    font-size: 15px;
    pointer-events: grab;
}
#chart {
    /* cursor: grab; */
    margin: 0 auto;
    border: 10px;
}
#question {
    text-align: center;
}
#question h1 {
    font-size: 50px;
    font-weight: bold;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* position: absolute; */
    padding: 0;
    margin: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

#spinResponse {
    font-size: 30px;
    text-align: center;
    width: 500px;
    padding-bottom: 30px;
    background-color: rgb(129, 19, 19);
    font-weight: bold;
}

</style>

还有main.js

// src/main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store';

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

在应用商店中的
操作
中，没有名为
操作\u toggleIsCategoryWheelSpinning的操作
，但有一个名为
toggleIsCategoryWheelSpinning的操作
，因此在地图操作中，您应该导入：

方法：{
映射操作（['toggleIsCategoryWheelSpinning']））
}
您的操作名称不匹配。您的代码应该是相同的。
尝试使用：
…mapActions（[“toggleIsCategoryWheelSpinning”]
导入操作
来自@Tao（见下文）的注释得出答案；特别是粗体文本

下面的代码修复了这个问题

在Wheel.vue中，编辑“方法”部分

...mapActions(['toggleIsCategoryWheelSpinning']),   
created(){
    this.toggleIsCategoryWheelSpinning       
},

调用dispatch时，从第一行更改为第二行

myStore.dispatch("toggleIsCategoryWheelSpinning,{}");    
myStore.dispatch("toggleIsCategoryWheelSpinning",{});

使用两个参数调用操作：name，它是
{module/}{action}的形式（当您使用
模块）和有效载荷，可以是一个对象（或数组，它仍然是
对象）或任何基元（字符串、布尔值、数字等…。因此调用
如果您愿意，可以将其命名为dispatch（“toggleIsCategoryWheelSpinning”，{}）
使用空对象作为有效负载调用它。您已经放置了有效负载
在name参数中，它将生成一个字符串，而该字符串不会
映射到一个已知的动作上。30分钟前

我按照您和@Sadraque Santos的建议编辑了我的代码。此外，我还添加了Wheel.vue的所有内容。不确定它是否相关，但Wheel.vue中调用dispatch的行在嵌套函数中。您需要调用函数作为
this.toggleIsCategoryWheelSpinning（）
在变异函数中，变量应作为
state.isCategoryWheelSpinning=！state.isCategoryWheelSpinning
使用两个参数调用操作：
name
，这是一个字符串，形式为
{module/}{action}
（使用模块时使用模块名称）和
payload
，它可以是一个对象（或数组，仍然是一个对象）或任何原语（
string
，
boolean
，
number
，等等）。因此将其称为
dispatch（“toggleIsCategoryWheelSpinning”，{}）
如果要使用空对象作为有效负载调用它。您已将有效负载放置在name参数中，它将生成一个字符串，该字符串不会映射到已知的操作。@tao，您的注释导致（是）答案。谢谢。欢迎。这就是我编写它的原因：）。我没有将其作为答案发布，因为我相信如果您花更多时间查看文档，您自己也会发现这一点。在我看来，这个错误是非常直接的，所以，在我看来，你的问题不太可能帮助未来的用户。因此，根据SO规则（据我理解），它不应该被回答。我意识到我在这里是主观的，但是，嘿，我可以选择在哪里设置考虑一个值得回答的问题的标准。如果不是这样，我只要指出正确的方向就行了，如果我看到的话。圣诞快乐！映射操作没有问题（因此您可以将其称为
this.someName（{}）。然后（r=>/*对返回的承诺结果*/）而不是
this.$store.dispatch（'someName'，{}）。然后（r=>…）
），但您并不真正需要它。这就是操作所做的所有映射：它在Vue实例上创建一个与存储中的操作同名的
async
方法，返回存储中的操作返回的承诺。
myStore.dispatch("toggleIsCategoryWheelSpinning,{}");    
myStore.dispatch("toggleIsCategoryWheelSpinning",{});