标签: vuex

我正在尝试切换到使用Vuex而不是我自己开发的商店对象,我必须说我没有像在Vue.js世界中那样清楚地找到文档.假设我有一个名为'products'的Vuex模块,它有自己的状态,突变,getter等.我如何在该模块中引用一个名为'clearWorking Data'的动作？文档提供了访问模块状态的示例:

__CODE__

但是我无法看到关于吸气剂,突变,动作等的任何信息.

找不到任何东西来解决这个看似明显的问题。

刚刚使用 Typescript 从 Vue 2 升级到 Vue 3 和 Vuex。

尽管遵循 Vue 3 说明，但 this.$store 似乎无法访问。

src/components/FlashMessages.vue:28:25 TS2339 中的错误：属性 '$store' 不存在于类型 'ComponentPublicInstance<{}, {}, {}, { getAllFlashMessages(): Word; }, {}, EmitsOptions, {}, {}, false, ComponentOptionsBase<{}, {}, {}, { getAllFlashMessages(): Word; }、{}、ComponentOptionsMixin、ComponentOptionsMixin、EmitsOptions、字符串、{}>>'。

    26 |     computed: {
    27 |         getAllFlashMessages (): FlashType {
  > 28 |             return this.$store.getters.getFlashMessages;
       |                         ^^^^^^
    29 |         },
    30 |     },
    31 | 

主文件

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import …

我在vuex商店的州很大.

有没有办法一次性重置状态中的所有数据,而不是手动将所有数据设置为null？

我目前正在开发一个新的Vue.js应用程序.它在很大程度上取决于对我的后端数据库的api调用.

对于很多事情,我使用Vuex商店,因为它管理我的组件之间的共享数据.在github上查看其他Vue项目时,我看到一个特殊的vuex目录,其中包含处理所有操作,状态等的文件.因此,当组件必须调用API时,它包含来自vuex目录的actions文件.

但是,对于消息,例如,我不想使用Vuex,因为这些数据仅对一个特定视图很重要.我想在这里使用组件特定数据.但这是我的问题:我仍然需要查询我的api.但我不应该包含Vuex动作文件.因此,我应该创建一个新的动作文件.这样我就有一个特定的文件,其中包含针对vuex和单个组件的api操作.

我应该如何构建这个？创建一个新目录'api'来处理vuex数据和特定于组件的数据的操作？还是把它分开？

在Vuex商店变异中,是否可以访问吸气剂？考虑下面的例子.

new Vuex.Store({
    state: {
        question: 'Is it possible to access getters within a Vuex mutation?'
    },
    mutations: {
        askQuestion(state) {
            // TODO: Get question from getter here
            let question = '';

            if (question) {
                // ...
            }
        }
    },
    getters: {
        getQuestion: (state) => {
            return state.question;
        }
    }
});

当然这个例子没有多大意义,因为我可以question直接在state变异中的对象上访问属性,但我希望你能看到我想要做的事情.也就是说,有条件地操纵状态.

在变异中,thisis undefined和state参数提供对state对象的访问,而不是存储的其余部分.

关于突变的文档没有提到任何关于这样做的事情.

我的猜测是,这是不可能的,除非我错过了什么？我想替代方法是在商店外执行此逻辑(导致代码重复)或实现执行此操作的操作,因为操作可以访问整个商店上下文.我很确定这是一种更好的方法,那就是让变异集中在它实际应该做的事情上; 改变国家.这可能就是我最终会做的事情,但我只是好奇如果甚至可能在突变中访问一个getter？

我是一名 Vue.js 开发人员，正在了解从 Vue 2 添加到 Vue 3 的新功能，即 Composition API（在 Vue 3 中添加）。

对于状态管理来说，随着 Vue 3 的发布，社区似乎正在从使用 Vuex 转向 Pinia。

Pinia 与 Vuex 之间有什么区别？从概念上讲，Vue 2 到 Vue 3 发生了什么变化，使得 Pinia 更适合 Vue 3？

谢谢。

我有以下Vuex商店(main.js):

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

Vue.use(Vuex)

//init store
const store = new Vuex.Store({
    state: {
        globalError: '',
        user: {
            authenticated: false
        }
     },
     mutations: {
         setGlobalError (state, error) {
             state.globalError = error
         }
     }
})

//init app
const app = new Vue({
    router: Router,
    store,
    template: '<app></app>',
    components: { App }
}).$mount('#app')

我还为Vue-Router(routes.js)定义了以下路由:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

//define routes
const routes = [
    { path: '/home', name: 'Home', component: Home }, …

我是 vue.js 的新手，刚从 react.js 过来。我在 vue 加载器中面临的问题一开始并没有发生。但是从第二次启动服务器时应用程序崩溃。

 npm run serve

> todo@0.1.0 serve /home/riyad/Desktop/todo_wedevs/todo
> vue-cli-service serve

 INFO  Starting development server...
 ERROR  Error: Cannot find module 'vue-loader-v16/package.json'
Error: Cannot find module 'vue-loader-v16/package.json'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:613:15)
    at Function.Module._load (internal/modules/cjs/loader.js:539:25)
    at Module.require (internal/modules/cjs/loader.js:667:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at api.chainWebpack.webpackConfig (/home/riyad/Desktop/todo_wedevs/todo/node_modules/@vue/cli-service/lib/config/base.js:114:23)
    at webpackChainFns.forEach.fn (/home/riyad/Desktop/todo_wedevs/todo/node_modules/@vue/cli-service/lib/Service.js:236:40)
    at Array.forEach (<anonymous>)
    at Service.resolveChainableWebpackConfig (/home/riyad/Desktop/todo_wedevs/todo/node_modules/@vue/cli-service/lib/Service.js:236:26)
    at Service.resolveWebpackConfig (/home/riyad/Desktop/todo_wedevs/todo/node_modules/@vue/cli-service/lib/Service.js:240:48)
    at PluginAPI.resolveWebpackConfig (/home/riyad/Desktop/todo_wedevs/todo/node_modules/@vue/cli-service/lib/PluginAPI.js:132:25)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! todo@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status …

这个问题让我陷入了困境.不幸的是,我在这里找不到答案(要求也没有帮助).所以经过一些研究并在这里和那里询问后,似乎我得到了这个问题的解决方案.

如果您有一个问题,您已经知道答案,并且您希望公开记录这些知识,以便其他人(包括您自己)可以在以后找到它.

当然,我的答案可能不是理想的,而且我知道它不是,这是我发帖的关键点 - 改进它.

注意,我没有在示例中使用动作.这个想法是一样的.

让我们首先说明问题:

想象一下,我们有App.vue动态生成其名为的本地组件Hello.

<template>
  <div id="app">
    <div>
      <hello v-for="i in jobs" :key="i" :id="i"></hello>
      <button @click="addJob">New</button>
    </div>
  </div>
</template>   

<script>
import Hello from './components/Hello'

export default {
  components: {
    Hello
  }...

store.js

export const store = new Vuex.Store({
  state: {
    jobs: []
  }
})

我们使用v-for指令通过遍历数组来生成组件jobs.我们store现在只state包含一个空数组.按钮New应该做两件事:

1)创建新的组件Hello,换句话说添加元素jobs(让它成为数),其中将要被分配为key和id的<hello>,并传递到本地部件如props. …

我在命名空间模块中有一个动作和一个全局变异(即不在模块中).我希望能够在行动中提交全局变异.

// Global mutation
export default {
  globalMutation (state, payload) {
    ...
  }
}

// Action in a namespaced module
export default {
  namespaced: true,

  actions: {
    namespacedAction ({ commit, dispatch, state }, payload) {
      commit({ type: 'globalMutation' })
    }
  }
}

调度命名空间操作后,Vuex将显示:

[vuex] unknown local mutation type: globalMutation, global type: module/globalMutation

有没有我可以传递给commit函数来调用这个全局变异的选项？