Vuex是Vue.js的Flux灵感应用程序架构。
Google Pay 无法在移动设备中的边缘和 Firefox 上运行，并且在所有浏览器的桌面上运行良好
我曾使用 VueJS 开发过 Google Pay。它在所有网络浏览器中工作正常，但在 Edge 和 Firefox 等移动浏览器中工作，在 Chrome 中工作。 当我们点击“Googl...
我正在使用 Vuex 和 Composition API 编写一个 Vue 3 应用程序。 我就遇到过这样的问题。 组件根据两个存储状态变量的状态显示元素。一个是数组，第二个......
如何使用 jest 和 vue-test-utils 在链接到存储 getter 的计算属性上测试手表？
我有一个Vue组件。 我的组件有一个计算属性，它引用 vuex 存储的 getter。 当这个 getter 更新时，我使用手表来执行一些操作。 我想测试一下我们的手表...
我正在尝试让我的新任务按优先级或最新排序。我从 vue 迁移了原始项目并添加了 vuex 进行练习，但它不再起作用。 导入“@/assets/main.css” ...
是否可以使用 devtools 破解 vuex 或 redux 存储的值？
如果是这样，我认为在那里放置任何与认证或授权相关的信息都是错误的。 可以吗？如何做？
我这里有一个问题。我将 Vue.js 与 Nuxt.js 一起使用。 我制作了中间件来实现身份验证。这里我使用 JSON Web Token。我有accessKey和refreshKey。刷新键用于
如何访问vue-router中的异步存储数据以在beforeEnter钩子中使用？
如何访问 beforeEnter 中通过 store 操作异步检索的存储数据？ 从 './vuex/store' 导入商店； store.dispatch('initApp'); // 在这里，异步数据...
我正在将 Nuxt2 应用程序迁移到 Nuxt3。在中间件中，我使用“上下文”访问存储状态，例如： 导出默认函数（上下文）{ const userName = context.store.state.common.auth.user } 在N...
未捕获的类型错误：(0, vue__WEBPACK_IMPORTED_MODULE_20__.reactive) 不是一个函数 - 在 Vue 2 中
我是Vue js的新手， 控制台错误： 错误 未捕获的 TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_20__.reactive) 不是一个函数 - 在 Vue 2 中 在resetStoreState（webpack-internal:///./
[Nuxt，i18n，Vuex]：如何从商店 getter 访问 this.$i18n.locales
我正在使用 Nuxt v2.15 和 @nuxtjs/i18n v7.2 构建一个 Web 应用程序。我使用 Vuex 进行状态管理。在我的全局状态下，我想创建一个 getter，它返回基于 this.$i18n.locale 的值。 什...
Vue 3 cdn 示例与 vuex 4，但如何访问 main.js 中的商店？
我的应用程序结构： > 公共 > 脚本 > - CDN > - vue.js > - vuex.js > main.js > 商店.js > 索引.html 在 head 标签内我有： <question vote="1"> <p><strong>我的应用程序结构：</strong></p> <pre><code>> public > scripts > - cdn > - vue.js > - vuex.js > main.js > store.js > index.html </code></pre> <p>在我的头部标签内有：</p> <pre><code><script src="./scripts/cdn/vue.js"></script> <script src="./scripts/cdn/vuex.js"></script> <script src="./scripts/main.js" type="module"></script> </code></pre> <p>我的身体里有-</p> <pre><code><div id="app"> <div v-for="item in items" >{{item.text}}</div> </div> </code></pre> <p><em><strong>store.js</strong></em></p> <pre><code>console.log('test in store.js', store.state) const store = new Vuex.createStore({ state: { items: [{ text: 'ahhh STORE 1' }, { text: 'ahhh STORE 2' }], }, mutations: { }, actions: { test({ state }) { console.log(state.items) } }, modules: { } }) </code></pre> <p><em><strong>main.js</strong></em></p> <pre><code>import * as store from "./store.js"; const { onMounted, onUpdated, onUnmounted, ref, reactive, getCurrentInstance } = Vue; //here define only what you need //Define Vue app const App = { state: store, // store, //using either store or state: store does not work data() { return {}; }, methods: {}, setup(props, context) { onMounted(() => { console.info("App mounted!"); console.log('mounted state', store.state) }); onUpdated(() => { console.info("App updated!"); }); onUnmounted(() => { console.info("App unmounted!"); }); } }; // Create new Vue app const app = Vue.createApp(App); app.use(store) app.mount("#app"); </code></pre> <p>因此，当应用程序运行时，它会在控制台中显示</p> <pre><code>test in store.js Proxy { <target>: {…}, <handler>: {…} } </code></pre> <p>但在 <pre><code>onMounted</code></pre> 中，它会将 <pre><code>store.state</code></pre> 返回为 <pre><code>undefined</code></pre>。 它可以通过在 <pre><code>createStore</code></pre> 内使用 <pre><code>main.js</code></pre> 来工作，但我想将其分开。</p> <p>我缺少什么以及如何使商店可以在主要区域访问？</p> </question> <answer tick="false" vote="3"> <p><pre><code>app.use(store)</code></pre> - 您已经将商店添加到 vue 实例中。</p> <p>然后您可以从任何组件访问此存储，例如使用：</p> <pre><code> import { mapState} from 'vuex'; ... computed: { ...mapState({ items: state => state.items }), }, </code></pre> <p>或在 <pre><code>setup</code></pre>:</p> <pre><code>import { useStore } from 'vuex'; ... setup(){ const store = useStore(); const state = store.state; // <-- state from vuex } </code></pre> <p>您的工作示例：</p> <p></p><div data-babel="false" data-lang="js" data-hide="true" data-console="true"> <div> <pre><code>const store = new Vuex.createStore({ state: { items: [{ text: 'ahhh STORE 1' }, { text: 'ahhh STORE 2' }], }, mutations: { }, actions: { test({ state }) { console.log(state.items) } }, modules: { } }) const { onMounted, onUpdated, onUnmounted, ref, reactive, } = Vue; //here define only what you need //Define Vue app const App = { data() { return {}; }, methods: {}, computed: { ...Vuex.mapState({ items: state => state.items }), }, setup(props, context) { const store = Vuex.useStore() onMounted(() => { console.info("App mounted!"); console.log('mounted state', store.state) }); onUpdated(() => { console.info("App updated!"); }); onUnmounted(() => { console.info("App unmounted!"); }); } }; // Create new Vue app const app = Vue.createApp(App); app.use(store) app.mount("#app");</code></pre> <pre><code><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script src="https://unpkg.com/[email protected]/dist/vuex.global.js"></script> <div id="app"> <div v-for="item in items">{{item.text}}</div> </div></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>我在将 Vuex 4 与 Vue CDN 集成时也遇到了类似的问题 看看我的文件夹结构</p> <pre><code>>Components -HelloWorld.js >store -index.js app.js index.html </code></pre> <p>在index.html文件中包含vuex 4 CDN链接，然后在store文件夹内的index.js文件中包含像这样的商店</p> <pre><code>const store = new Vuex.Store ({ state: { //states }, mutations: { //mutations }, actions: { //actions }, getters: { //getters }, </code></pre> <p>});</p> <p>导出默认商店` 在 app.js 根文件夹内包含 store as</p> <pre><code>import store from './Store/index.js' app.use(store); </code></pre> <p>从组件级别访问商店，无需像下面这样导入</p> <pre><code>this.$store.//store function </code></pre> </answer> </body></html>
我正在开发一个带有 springboot 后端和 Vue 前端的项目。现在我可以从我的数据库中获取产品列表。我可以获取列表并将其显示在页面上，但我正在尝试使用...
请帮助我。我连续尝试了10个小时，但没有成功。我希望当我在父组件中单击 @click="cleanDataForm" => 子组件中的 v-model 文本时将“”...
当您单击按钮时，如何将 vuex 中的 getter 等同于 vue 2 中另一个组件中的变量？
当您单击按钮时，如何从 vuex 发送一个操作并将其中一个数据属性与 vuex 的 getter 等同起来？ 当您单击按钮时，如何从 vuex 发送一个操作并将其中一个数据属性与来自 vuex 的 getter 等同起来？ <template> <div id="app"> <div class="btns"> <button id="btn--send" @click="sendData">send data</button> <button id="btn--clear" @click="cleanData">clean data</button> // This place </div> </div> </template> 我的Vuex： export default { state: { dataSelect: "" }, actions: { cleanData({commit}) { commit("clean") } }, mutations: { clean(state) { state.dataSelect = "" } }, getters: { DATA_SELECTED(state) { return state.dataSelect } } } 在此组件中需要更改数据 <template> <div class="SelectFloors"> <p id="title--choose">Выбранный этаж</p> <VueSimpleSelect @change="chooseFloor" :options="floors" v-model="selectedFloor" placeholder="Выберите этаж" class="sel__floor" /> </div> </template> <script> export default { name: "selectFloors", data() { return { floors: [ { label: 'floor 1', value: 1 }, { label: 'floor 2', value: 2 }, { label: 'floor 3', value: 3 }, ], selectedFloor:'' } }, methods: { }, } </script> 在此组件中，当 pepson 单击按钮（在第一个组件中）时需要清理数据， this.selectedFloor 需要 = '' 如何做到这一点？ 谢谢你 请看一下演示（您可以在第二个组件中观看 DATA_SELECTED getter）： const vuexdata = { state: { dataSelect: "" }, actions: { cleanData({commit}) { commit("clean") }, chooseFloor({commit}, payload) { commit("choose", payload) } }, mutations: { clean(state, payload) { state.dataSelect = "" }, choose(state, payload) { state.dataSelect = payload } }, getters: { DATA_SELECTED(state) { return state.dataSelect } } }; const store = new Vuex.Store(vuexdata); const app = { name: 'app', computed: { ...Vuex.mapGetters(['DATA_SELECTED']), }, methods: { ...Vuex.mapActions(['cleanData']), }, template: ` <div class="btns"> <button id="btn--clear" @click="cleanData">clean data</button> <second></second> </div> `, } Vue.component('second', { template: ` <div class="SelectFloors"> <p id="title--choose">Выбранный этаж</p> {{ selectedFloor }} <select @change="chooseFloor(selectedFloor)" v-model="selectedFloor"> <option v-for="(floor, i) in floors" :key="i"> {{ floor.value }} </option> </select> </div> `, computed: { ...Vuex.mapGetters(['DATA_SELECTED']), }, methods: { ...Vuex.mapActions(['chooseFloor']), }, watch: { DATA_SELECTED(newVal) { this.selectedFloor = newVal } }, data() { return { floors: [ {label: 'floor 1', value: 1}, {label: 'floor 2', value: 2}, {label: 'floor 3', value: 3}, ], selectedFloor: this.DATA_SELECTED } }, }) new Vue({ el: '#demo', store, render: h => h(app), }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src=" https://unpkg.com/[email protected]/dist/vuex.js"></script> <div id="demo"></div>
为什么会出现错误 - 未捕获的语法错误：请求的模块'/src/router/index.js'在main.js vue中没有提供名为'default'的导出？
在 vite vue 运行时出现错误 - 为什么会出现错误 - 未捕获的语法错误：请求的模块 '/src/router/index.js' 未在 main.js vue 提供名为 'default' 的导出？怎么了 ？ https://
Vue3 Vuex Vue-route状态好像是undefiend
我过去创建了一个小型 vue 应用程序，没有任何路由或存储。 我什至不会描述“后端”。 现在我的任务是创建一个更大的应用程序。所以我想...
当 vuex getter 返回新数组时，vue v-for 不会更新
我正在尝试创建一个使用 v-for 显示在屏幕上的反应式数组。该数组存储在 vuex 状态数组中，并由 vue 组件使用 vuex getter 进行检索。里面有
如何动态注册和取消注册 vuex-module-decorators 存储？
我有一个 vuex-module-decorators 装饰的 Vuex 商店。我希望能够根据我所在的 Vue 组件动态加载和卸载模块，这样我就不会在...
为了更简洁的展示，我把案例中不涉及到的方法都去掉了。 需要返回指定id的对象的计数值。当我将有效的 ID 传递给计数器时，