vue和vuex: Evrything工作，只是想看看如何缩短代码。有没有某种观察者，或者缩短代码的最好方法是什么？
vue是一种流行的JavaScript框架，用于构建用户界面。它具有轻量级、易学易用的特点，被广泛应用于前端开发中。而vuex则是vue的官方状态管理模式，用于解决组件之间共享状态的问题。下面是针对这个问题的详细解答：
- Vue是什么？ Vue是一种轻量级、渐进式JavaScript框架，用于构建用户界面。它通过封装DOM操作，提供了一套响应式的数据绑定和组件化的开发模式，使得开发者可以更高效、便捷地构建交互式的Web应用。
Vue具有以下特点：
- 易学易用：Vue提供了简洁的API和清晰的文档，使得开发者可以快速上手并高效地构建应用。
- 数据驱动：Vue使用响应式的数据绑定机制，通过追踪依赖，自动更新DOM，简化了应用的开发和维护。
- 组件化开发：Vue支持将UI拆分为可复用的组件，使得开发者可以按照组件化思维进行开发，提高代码的复用性和可维护性。
- 虚拟DOM：Vue通过使用虚拟DOM，实现了高效的DOM更新，提升了性能。
- 插件化：Vue提供了丰富的插件系统，可以与其他库或现有项目进行无缝集成。
- Vuex是什么？ Vuex是Vue的官方状态管理模式，用于解决应用中多个组件共享状态的问题。它采用集中式存储管理应用的所有组件状态，并以相应的规则保证状态的一致性。
Vuex的核心概念包括：
- State：用于存储应用的状态。在Vue组件中可以通过this.$store.state来访问。
- Mutation：用于修改状态的唯一途径，确保状态的变更可被追踪。通过提交mutation来修改状态。
- Action：用于处理异步操作，可以通过提交action来触发。在action中可以执行异步操作，并提交mutation来修改状态。
- Getter：用于从store中派生出一些状态，类似于计算属性。
Vuex的优势：
- 集中式管理：Vuex将应用的状态集中存储管理，便于开发者进行状态的追踪和管理。
- 易于维护和调试：Vuex的状态变更是通过提交mutation进行的，由于所有的状态变更都可以被追踪，因此易于维护和调试。
- 支持插件扩展：Vuex提供了丰富的插件系统，可以扩展其功能，例如调试工具、持久化存储等。
- 如何缩短代码或使用观察者模式？ 在Vue和Vuex中，可以通过一些技巧和最佳实践来缩短代码或使用观察者模式，以提高开发效率和代码可维护性。
- 计算属性：在Vue组件中，可以使用计算属性来处理需要依赖其他属性的逻辑。计算属性会缓存其结果，只有相关依赖发生变化时才会重新计算，因此可以提高性能。
- 方法和监听器：对于一些需要触发特定操作的场景，可以使用方法或监听器来实现，而不是将全部逻辑都放在模板中。这样可以提高代码的可读性和维护性。
- 显示条件：使用Vue的指令（如v-if、v-show）来控制组件或元素的显示与隐藏，以避免不必要的渲染和更新，提高性能。
- 使用插件或第三方库：Vue和Vuex生态系统中有许多插件和第三方库可以用于优化代码和提供额外的功能。可以根据具体需求选择合适的插件或库，以便快速缩短代码。
总结：通过合理使用计算属性、方法和监听器，并结合显示条件和合适的插件，可以缩短代码并提高开发效率。观察者模式在Vue中得到了很好的体现，并且通过Vuex进行了进一步的封装和优化。
相关·内容
1回答
我正在建立一个在VueJS上练习的电影网站。在应用程序初始化期间，我从第三方API获得了电影类型的列表。由于应用程序的几个组件都需要这个列表，所以我通过Vuex管理和存储它，如下所示：
main.js:
new Vue({
router,
store,
vuetify,
render: h => h(App),
created () {
this.$store.dispatch('getGenreList')
}
}).$mount('#app')
Vuex's index.js
export default new
浏览 1提问于2020-03-09得票数 2
回答已采纳
1回答
我想使用Vuex来驱动不使用Vue的服务器端应用程序。这个是可能的吗？
const Vuex = require('vuex');
const store = new Vuex.Store({
state: {
potatoes: 1,
},
getters: {
doublePotatoes(state) {
return state.potatoes * 2;
},
},
mutations: {
addPotato(state) {
浏览 2提问于2017-09-14得票数 0
现在，我正在使用事件总线从其他不相关的Vue组件调用某些Vue组件的方法。
我有一个功能良好的Vuex存储，所以我试图摆脱事件总线，并将此功能转移到Vuex商店。
问题
我应该将事件总线功能移到Vuex商店，还是两者都使用？
在Vuex商店中实现事件总线功能的最佳方法是什么？
请给出一个实际示例，说明如何使用Vuex调用另一个非相关组件中的方法：
First.vue
methods: {
test1 () {
console.log('test1 was called')
}
}
Second.vue
methods: {
callMet
浏览 0提问于2018-08-12得票数 0
我正在尝试从Firestore初始化我的Vuex商店。最后一行代码context.commit('SET_ACTIVITIES', acts)是创建错误的原因。我不认为我是直接变异状态，因为我使用的是行动。我错过了什么？
这是我的Vuex商店
export default new Vuex.Store({
strict: true,
state: {
activities: []
},
mutations: {
SET_ACTIVITIES: (state, activities) => {
state.activities =
浏览 0提问于2019-05-06得票数 6
回答已采纳
1回答
我有一个组件，该组件是基于活动的路由隐藏的，它启动了一个使用vuex存储的函数。
它的工作原理是，sidenav隐藏在登录、注销和注册时。
但是，我注意到，当我在通过身份验证的页面(如管理面板或仪表板等)上时，组件将正确显示，但当/如果有人重新加载该网页时，该组件将消失，只会在单击指向另一个页面的链接时显示。
App.Vue
<template>
<div id="app">
<navbar />
<sidenav v-show="sidenav_toggle" />
浏览 1提问于2019-03-07得票数 1
回答已采纳
我刚刚开始使用 vuex ，我不得不在vuex内部使用vue实例。在vue应用程序中，我使用了一个名为vue to 的包，并在main.js中编写了以下代码
import Toasted from 'vue-toasted';
const ToastedOptions = {
position: 'bottom-center',
duration: 1500,
theme: 'bubble'
};
Vue.use(Toasted, ToastedOptions);
这在.vue文件中运行得很好。但并没有在store.js内部工作。
浏览 5提问于2020-09-02得票数 1
回答已采纳
我有一个包含username字符串的Vuex商店。它最初被设置为and空字符串，但每个用户，无论是新用户还是旧用户，最初都将被分配一个随机字符串。
我想允许用户更改他们的用户名。我还希望在文本输入中将用户名显示为初始value。
但是，初始值只是一个空字符串。当在created (或之后的任何生命周期方法)中登录username时，我得到[__ob__: Observer]。如果我将超时设置为500ms，我会得到预期的字符串，但这对我来说太混乱了。
相关代码如下：
<template>
<form @submit.prevent>
<input
浏览 0提问于2021-04-09得票数 1
1回答
如何用测试库测试组件观察者？
、、、、
与testing-library和Vue组件的Vuex相斗争。这是组件，它有一个观察者：
<template lang="pug">
div
</template>
<script>
import { mapState } from 'vuex'
import NProgress from 'nprogress'
export default {
computed: mapState(['scraping']),
watch: {
scraping
浏览 24提问于2022-07-20得票数 0
我和Vuex混在一起，我几乎让它起作用了，只有这个问题困扰着我。你看，我有一个产品列表，每个产品都有自己的"addToCart()“点击事件。
在产品被添加到购物车之后，它应该更新Home.vue组件中的购物车。奇怪的是，这只会在单击第一个产品的addToCart按钮或第二个产品第一次使用该按钮时更新。只有当你点击第一个产品的按钮，它将更新两个产品的数量。
这是我的代码，下面是组件Home.vue：
<template>
<div class="home">
<div v-for="product in cart"
浏览 1提问于2021-07-07得票数 1
回答已采纳
我刚刚开始使用vuejs，并注意到.vue文件中的某种结构。
export default {
data() {
return {
temp: {},
list: []
};
},
methods: {
addNew: function() {
},
entitySaved($event) {
}
}
}
我们可以假设export是符合json的结构吗？如果是这样，没有属性名的data()函数是什么意思？
浏览 0提问于2020-06-11得票数 0
1回答
我想利用"Vuex“功能在整个项目中存储和使用"isAuthenticated”变量，根据这一点，允许访问路由。我的错是什么？我花了很多时间，回顾了许多不同的方法将vue商店嵌入到项目中，但没有结果。
“商店”中的"index.js“：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
isAuth: false,
},
mutations:
浏览 1提问于2022-02-20得票数 1
回答已采纳
1回答
我正在尝试更新vuex商店中的高级图表数据，但问题是，当触发单击事件时，vuex存储状态中的数据会发生变异，但只有当我对代码进行一些更改并保存更改时，它才会反映在我的High图表组件中。
我正在使用Vue和High曲线图开发仪表板。。
<template>
<div>
<vue-highcharts :options="options" ref="lineCharts"></vue-highcharts>
<v-btn>{{parts}}</v-btn>
</d
浏览 1提问于2019-01-14得票数 2
2回答
在Vue文档中，计算出的属性被巧妙地缓存，而不是使用常规方法：
相比之下，每当重呈现发生时，方法调用都会运行该函数。为什么我们需要缓存？假设我们有一个昂贵的计算财产..。
，我的问题是：Vuex 也有类似计算属性的缓存吗？(包括Vuex观看，如。使用vm.$store.watch...)
浏览 7提问于2017-01-14得票数 3
回答已采纳
在我的NuxtJS应用程序中，当我试图更新用户的photoURL时，我会得到以下错误：
client.js?06a0:103
Error: [vuex] do not mutate vuex store state outside mutation handlers.
at assert (vuex.esm.js?2f62:135)
at Vue.store._vm.$watch.deep (vuex.esm.js?2f62:893)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e
浏览 5提问于2021-10-09得票数 1
回答已采纳
我有一个名为ProductArea的组件，它显示从Prismic API加载的产品。加载的产品依赖于用户在侧栏中选择的category。
我正在使用Vuex，并且很难找到一个流，以避免category在我的商店中不可用的情况(category也是从Prismic加载的)。
ProductArea的父级如下所示：
<template>
<div>
<NavBar />
<!-- <Header /> -->
<main>
<div v-if="!$fetchState.p
浏览 2提问于2021-01-08得票数 1
回答已采纳
我有Vue 2.5.16和Vuex 3.0.1，它们都是使用vue-cli 3.0.0-rc.3新安装的。
我有一些名为Vuex的模块，如下所示：
// src/store/brand.js
export default {
getters: {
value1 (state) {
return state.value1
}
value2 (state) {
return state.value2
}
},
namespaced: true,
st
浏览 0提问于2018-08-07得票数 0
回答已采纳
我正在尝试在一个应用程序中使用firebase。然而，我正在尝试根据用户身份验证状态来呈现路由，但是由于某些原因，firebase告诉我用户已经登录，但用户并没有登录。我用的是vuex。
getRoutes (state) {
let mRoutes = []
firebase.auth().onAuthStateChanged(function (User) {
if (User) {
console.log('Not loggedin')
mRoutes = state.authenticatedUserRoutes
} el
浏览 1提问于2020-03-19得票数 0
1回答
设置
我有一个超级简单的测试应用程序，有两个组件(一个<h1>和一个<input>)和一个vuex数据存储。<input.与存储数据元素pageTitle绑定v-model，<h1>使用双括号显示pageTitle。当我更改输入字段中的文本时，值将在存储区和所有组件中更改(在dev tools中可以看到)。
问题
但是，当我在控制台中直接更改存储中的值时(使用store.state.pageTitle = 'something else'，<h1>会更新，但文本字段中的值不会更新)。但是，在初始页面加载时，将使用存储区的数据
浏览 0提问于2017-05-25得票数 0
回答已采纳
小提琴：
我在计算属性上有一个监视程序，它依赖于异步设置的Vuex存储变量。当计算属性发生更改时，我试图设置Vue组件的数据变量，但没有发生这种情况。
以下是Vue组件：
new Vue({
el: '#app',
store,
data : {
myVar : ""
},
beforeMount() {
this.$store.dispatch('FETCH_PETS', {
}).then(() => {
console.log
浏览 7提问于2016-11-11得票数 5
回答已采纳
2回答
我试图在web扩展中使用共享的vue.js状态。
状态存储在后台脚本的DOM中，并呈现在弹出页面中。
首次尝试
我的第一次尝试是使用一个没有vuex的简单商店：
background.js
var store = {
count: 0
};
popup.js
browser.runtime.getBackgroundPage().then(bg => {
var store = bg.store;
var vue = new Vue({
el: '#app',
data: {
state: st
浏览 0提问于2018-03-17得票数 6
我有一个vue方法，它希望将数据提交给vuex突变，出于某种原因，我一直得到不明确的TypeError: this.$store.commit不是一个函数。
当我单击列表项并调用函数时，会触发错误。
sample.vue
<li class="tabs-title" v-for="item in filteredItems" v-on:click="upComponents" :key="item.initials" >
export default {
data() {
return {
浏览 0提问于2017-09-26得票数 4
回答已采纳
1回答
Vuex观察者错误地射击了两次
、、、、
我已经找了两个小时了，我一点也不知道我做错了什么..希望有人能帮我：
基本上这很容易。我有一个可重用的Recaptchas组件。所讨论的元素是弹出对话框中的textfield，用于“忘记密码”(通过登录掩码)
处理不同的captchas (因为同一页上有两个)的基本思想是：
对于每个可能的captcha我都有一个vuex字段，输入到nullfor每个表单提交按钮，我触发一个将captcha字段设置为0then的突变--在recaptcha组件中设置了侦听更改的观察者，并且if === 0，开始评估captcha，然后调用onValidated，调用一个将结果保存为vuex的突变。if(newV
浏览 0提问于2019-10-24得票数 0
3回答
我有这样的错误:我以前认为这是路由器的问题，但创建新项目后，只有vuex问题仍然存在
这是我的main.js
import Vue from 'vue'
import App from './App'
import store from './store'
new Vue({
el: "#app",
store,
render: h => h(App)
})
store.js：
import Vue from 'vue'
import Vuex from 'vuex'
Vue
浏览 0提问于2017-01-25得票数 0
1回答
如何重置/擦除vuex存储数据？
、、、、
在我的/src/store/文件夹中，我有actions.js、index.js、mutations.js和state.js，它们包含以下信息
actions.js
export default {}
index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import actions from './actions'
import mutations from './mutations'
Vue.use
浏览 0提问于2017-09-13得票数 2
如何在组件生命周期挂钩中访问vuex存储中的数据？例如，如果用户是管理员，则可以查看此页面，否则将用户重定向到另一个页面。下面是我的档案
请忽略代码中不相关的注释，不能发布大部分代码，我认为我不需要比我已经有更多的评论
我还想说明我在vue和vuex的开头
vuex.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: { // state
user: null
},
g
浏览 0提问于2021-04-16得票数 1
2回答
我正在努力改进vuex模块，但是在下面出现了错误：
Uncaught Error: [vuex] getters should be function but "getters.getComments" in module "comments" is [].
/stores/comments.js (模块)
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
comments: []
}
const getter
浏览 3提问于2017-10-29得票数 7
回答已采纳
1回答
我使用vuex将chartData映射到一个状态属性。我想要做的是在更新数据集时更新图表。mixin会根据自动在chartData上设置一个监视器，但我不确定如何在vuex中使用它。
LineChart.js：
import { Line, mixins } from "vue-chartjs";
const { reactiveProp } = mixins;
export default {
extends: Line,
mixins: [reactiveProp],
props: ["options"],
mounted() {
浏览 7提问于2018-08-09得票数 0
回答已采纳
1回答
我有一个设置的代码框，它应该打印三个日期。
最相关的代码是：
import Vue from "vue";
import App from "./App";
import Vuex from "vuex";
Vue.use(Vuex);
const { DateTime } = require("luxon");
Vue.config.productionTip = false;
var store = new Vuex.Store({
debug: true,
state: {
dateTimes: [
浏览 0提问于2018-11-23得票数 1
回答已采纳
在下面的代码中，组件(app.vue) c2属性在increment更新存储计数器this.$store.state.counter++;时不会更新
我知道我可以使用c2作为computed属性来解决这个问题，但是我想知道为什么Vuex或vue不启动反应性，因为计数器的值是通过增量方法更新的。
Store.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
counter:
浏览 2提问于2019-05-17得票数 0
回答已采纳
1回答
我正在努力保存一些数据，这些数据需要在页面重新加载后保持不变。我偶然发现了Vuex。我设法让它在一个只有Javascript的项目中工作，但由于某种原因，我不能让它在TypeScript中工作。刷新后，数据使用默认值，而不是在页面刷新之前分配的数据。 import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersistence from 'vuex-persist'
import LanguageEntry from '../classes/LanguageEntry'
浏览 32提问于2021-07-31得票数 0
回答已采纳
我在组件中有一个语言观察者，我从getter获得当前语言(它的值从Toolbar语言选择器中更改，默认的state.language是"en")
ContactForm.vue
...
data() {
return {
contactLang: "",
...
};
},
computed: {
...mapGetters(["language"]),
},
watch: {
language(newLanguage) {
浏览 0提问于2018-10-21得票数 1
2回答
我试图使用vuex中存储的数据来呈现d3图。但是我不会用renderGraph()函数获取数据。
如何在renderGraph()?中获取数据
以下是存储方法。
store/index.js
import Vue from "vue";
import Vuex from "vuex";
import * as d3 from "d3";
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
subscribers: []
},
getters: {
浏览 2提问于2020-04-10得票数 0
回答已采纳
我编写了以下代码，但它显示了一个错误。原因是什么？
误差
vuex未知动作类型: showRegisterLogin/show
HomePage.vue //组件
当使用sh方法时，会导致此错误。
import { mapState, mapActions } from "vuex";
export default {
name: "HomePage",
components: {
RegisterLogin
},
data() {
return {}
},
computed: {
...mapState(
浏览 2提问于2020-03-25得票数 1
回答已采纳
1回答
我有一个Vue Webpack应用与Vuex (我是新手，来自安博世界)。目前，我已经设置了使用vue-resource的两个文件，如下所示：
/src/store/api.js
import Vue from 'vue';
import { store } from './store';
export default {
get(url, request) {
return Vue.http
.get(store.state.apiBaseUrl + url, request)
.then(response => P
浏览 1提问于2018-01-29得票数 16
回答已采纳
我目前还在学习vue 2和vuex，现在我正在测试如何使用axios从API中设置初始状态。根据我的理解，初始状态始终是一个空对象，但是使用组件上的前挂载选项来执行initState操作和startState突变，可以用API响应数据来更改状态，对吗？但是由于某种原因，我的代码中的mapGetter返回未定义的。再说一遍，我还在学习，所以可能是我犯了一个愚蠢的错误，使代码不起作用。因此，任何投入都将不胜感激！
下面是我的代码：
TodoModule.js
import axios from "axios";
const state = {};
const g
浏览 2提问于2022-08-15得票数 0
2回答
在下面的代码中，我将一个textarea的输出双向绑定到一个p元素，一次是从组件的内部状态，一次是从Vuex。Vuex状态确实显示了初始值，但是该值不会随着我添加或删除文本而更新(就像它正确地处理绑定到内部数据的第一个文本区域一样)。导致此问题的差异是什么？
组件代码：
<template>
<div>
<div>
<textarea name="textarea1" id="txtid" cols="40" rows="30" v-model="inter
浏览 64提问于2017-07-05得票数 7
回答已采纳
因为某种原因我无法进入商店。
文件结构：/store/index.js /store/modules/auth.js
store/index.js
import Vuex from 'vuex';
import Vue from 'vue';
import auth from './modules/auth';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
auth
}
});
auth.js
import Vue from 'vue'
im
浏览 0提问于2020-05-10得票数 2
回答已采纳
我正试着在我的Vue应用中设置Vuex。
app.js
require('./bootstrap');
window.Vue = require('vue').default;
import Vuex from "vuex";
Vue.use(Vuex);
import storeData from "./store";
const store = new Vuex.Store(
storeData
)
Vue.component('home', require('./components/H
浏览 1提问于2021-11-14得票数 0
2回答
我是Vue的新手，所以我可能误解了什么。我想在App.vue中的本地函数中调用vuex操作，如下所示：
<template>
<div id="app">
<button @click="runFunction(1)">Test</button>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default{
data() { return { }
浏览 0提问于2019-08-08得票数 1
回答已采纳
我使用Vue路由器和vuex创建了一个vue应用程序。我在这个应用程序中面临的问题是，当一个用户注销而另一个用户登录时，第二个用户仍然会看到前一个用户的数据。刷新页面后，调用API方法并加载新数据。但是，如果使用不重新加载页面，API就不会被调用。我正在使用Vue 3。是否有办法阻止Vue/Vuex保留以前的数据？
我的代码结构如下：
data() {
return {
data: []
}
},
created() {
this.fetchData();
},
methods: {
async fetchData() {
try
浏览 0提问于2021-06-22得票数 0
回答已采纳
在我的vue前端，我尝试设置Vuex。在我的商店页面上(在商店目录内，文件名为index.js)使用VUE3.0的.Im当我运行代码时，我得到了Cannot read property 'use‘of undefined On Vue.use(Vuex)行 这是代码的一部分 import Vue from "vue";
import Vuex from "vuex";
import Api from "../services/api";
Vue.use(Vuex);//here i get the error
export defa
浏览 30提问于2020-09-08得票数 1
回答已采纳
我使用的是Vuex，在Getter Foo function中，我在数组中返回两个值：
return ["Try Again"]或return ["Data result", data]，在计算中，我检查array length并根据结果返回
computed:{
Foo: function(){
const getFoo = this.$store.getters.Foo;
if(getFoo.length === 1) {
this.existFoo = false
return
浏览 2提问于2021-02-17得票数 1
回答已采纳
我的Vue 2.6应用程序中有一个名为Vuex的商店，其中一个模块如下所示：
//books.js
export default {
state: {
books: null
},
mutations: {
SET_BOOKS(state, books) {
state.books = books;
},
},
actions: {
setBooks: async function ({ commit }) {
//api call
commit('SET_BOOKS', books)
浏览 4提问于2020-06-15得票数 2
回答已采纳
我对我的项目进行了以下npm包更新：
vuex: 2.3.1 -> 3.0.0
vue: 2.4.2 -> 2.5.2
vue-router: 2.7.0 -> 3.0.1
(还有一些，但我不认为它们与这个问题相关)
现在，当我启动我的网页时，我得到了这个错误：
错误: vuex动作应该是带有“处理程序”函数的函数或对象，但是"actions.default“是{}
我不知道为什么，我读了Vuex changelog，语法似乎并没有改变，但出于某种原因，我的代码崩溃了。
仔细研究这个问题后，我发现错误是由名为vuex.esm.js的文件中的一个失败断言生成的：
浏览 5提问于2017-10-29得票数 2
回答已采纳
1回答
当我设置strict: true时，我会得到错误：
vue.js:525 [Vue warn]: Error in watcher "state"
(found in root instance)
warn @ vue.js:525
run @ vue.js:1752
update @ vue.js:1720
notify @ vue.js:584
reactiveSetter @ vue.js:814
Transform.resize @ transform.js:169
e.resize @ map.js:343
e._onWindowResize @ map.js:12
浏览 2提问于2016-12-29得票数 1
回答已采纳
2回答
我在用Vue和Vuex。在我的组件中，我有以下代码：
computed: {
...mapState({
address: state => state.wallet.address
})
},
它在UI中工作得很好，但是我想要做的是，一旦地址改变了它的值，就调用一个方法。知道我怎么能触发吗？
浏览 2提问于2021-08-13得票数 1
回答已采纳
1回答
我使用@nuxt/strapi作为NuxtJS的Strapi的包装器。对于Nuxt中的Vuex，我使用了命名空间模块模式，所以我的结构看起来像这样：
store
├── user.js
├── posts.js
└── index.js
在Vue项目中，我会导入Vue，Vuex，也许是Axios，然后创建一个商店实例const store = new Vuex.Store(storeOptions)，然后分派我的初始操作或从store/index.js内部进行一些API调用。
vue项目中的index.js示例：
import Vuex from 'vuex';
import
浏览 5提问于2020-10-13得票数 0
使用Vuatefyjsv1.5，我能够使用vue观察者动态地更改主题。这不再适用于Vuatefyjs2.0
版本: 2.6.10版本: 2.0 Vuex: 3.1.1
export default {
data() {
return {
darkEnabled: this.$store.state.darkEnabled
}
},
created () {
this.$vuetify.theme.dark = this.darkEnabled;
},
watch: {
'this.$store.state.darkEnab
浏览 0提问于2019-07-27得票数 2
回答已采纳
试图在组件中使用Vuex状态。
这样做很好：
main.js
const store = new Vuex.Store({
state: {
counter: 1
},
mutations: {
increment(state) {
state.counter++
}
}
})
new Vue({
store,
render: h => h(App)
}).$mount('#app')
内部组件：
<span>{{this.$store.state.test}}</span>
当我试图
浏览 0提问于2018-09-18得票数 0
回答已采纳
1回答
全局窗口实例上的Vuex
、、、
好的，这是一个非常复杂的问题，但我很感谢你的帮助。
我在rails应用程序上运行vue webpacker，我想在它上使用Vuex，但是所有Vue组件都是无关的，我在网上找到的解决方案()是将Vuex添加到全局窗口实例并将该javascript导入到他的主布局中的人，我已经这样做了，并且可以正确地看到我的全局窗口实例中存在一个Vuex实例。
我正在运行的javascript代码如下：
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const vuex_store = new Vue
浏览 2提问于2020-09-03得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
