Vuex 突变和操作不起作用

Posted 2023-02-23

【中文标题】Vuex 突变和操作不起作用

【英文标题】：Vuex mutations and actions not working

【发布时间】：2018-11-30 19:54:45

【问题描述】：

我是 Vue 和 Vuex 的新手，我正在尝试弄清楚如何改变存储中的数据。

目前在我的州，默认用户名是“default”，我想将其更改为“otto”，稍后我会从数据库中获取此信息。但为了理解的目的，我只是想让它发挥作用。

此时组件已正确加载，并显示为“默认”。不存在任何错误。

store.js：

// store.js 
export default 
    state: 
        username: 'default'
    ,
    getters: 
    ,
    mutations: 
        changeUsername (state) 
            state.username = 'otto'
        
    ,
    actions: 
        changeUsername (context) 
            context.commit('changeUsername')
        
    

vue 文件：

// Basic.vue
<template>
    <div>
        <p> username </p>

    </div>
</template>

<script>
    import  mapState  from 'vuex';
    import  mapMutations  from 'vuex';
    import  mapActions  from 'vuex';


    export default 
        name: "basic",

        computed: 
            ...mapState([
                'username'
            ])
        ,
        methods: 
            ...mapMutations([
                'changeUsername'
            ]),
            ...mapActions([
                'changeUsername'
            ])
        
    
</script>

【问题讨论】：

你在哪里调用突变/动作？

@ThomasKleßen 我不知道在哪里调用突变/动作，以及如何..

【参考方案1】：

不要包含您的突变，因为它会被您的操作调用。并调用按钮点击的动作，例如：

商店：

// store.js 
export default 
    state: 
        username: 'default'
    ,
    getters: 
        username: state => state.username
    ,
    mutations: 
        setUsername (state) 
            state.username = 'otto'
        
    ,
    actions: 
        updateUsername (context) 
            context.commit('setUsername ')
        
    

组件：

// Basic.vue
<template>
    <div>
        <p> username </p>
        <button @click="updateUsername">Change!</button>
    </div>
</template>

<script>
    export default 
        name: "basic",

        computed: 
            username() 
                return this.$store.getters.username
            
        ,
        methods: 
            updateUsername() 
                this.$store.dispatch('updateUsername')
            
        
    
</script>

附加建议：在命名突变和动作时要小心。您不希望它们具有相同的名称以避免不必要的行为。我通常将我的突变命名为setXXXX，并将我的操作命名为getXXX 或patchXXX，具体取决于请求的用途。

Working jsfiddle

【讨论】：

感谢您的澄清！关于命名约定，您有什么建议？这样我就知道突变和动作是相关的但名称不同？

点击按钮时我似乎遇到了这个错误 --> Uncaught TypeError: Cannot read property 'apply' of undefined at VueComponent.mappedAction (app.js:1267) at invoker (app .js:39323) 在 htmlButtonElement.fn._withTask.fn._withTask (app.js:39122)

当然...必须通过dispatch 调用操作。看看我的编辑和我的例子。我还在商店中添加了一个 getter 以不直接访问状态。

好的，非常感谢您的帮助，现在我在相应地更改所有代码时得到这个输出，用户名现在输出：“function username(state) return state.username; ”此外，当我将 getter 更改为“返回 this.$store.state.username”，它确实有效。但是，当我单击按钮时，出现错误：“未捕获的 TypeError：this.$store.dispatch 不是函数”

如果分派不可用，您的商店初始化/包含可能存在问题。尝试回到一个非常基本的工作环境，看看它失败的地方。

【参考方案2】：

<template>
    <div>
        <p @click="changeUsername"> username </p>

    </div>
</template>

如果用户像这样点击 p 标签，您可以更改用户名。

【讨论】：

谢谢，但是现在我在单击按钮或 p 标签时遇到了以下错误。未捕获的类型错误：无法在 HTMLButtonElement.fn._withTask.fn._withTask (app.js:39122) 的调用程序 (app.js:39323) 处读取 VueComponent.mappedAction (app.js:1267) 处未定义的属性“应用”跨度>