我正在研究vue-cli上的一个研究项目，尽管它是一个简单的项目，但我仍在尝试应用我一直在学习的东西。
我有一个带有两个routes的标题：
一旦进入这两个fade中的任何一个，我就设置了一个简单的routes动画。
这里有两个问题，我认为两者都是相关的。按照下面列出的内容发布code块后，我将对其进行介绍。
我将在下面发布我的代码：
Header.vue（这是我的标题）
<template>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<router-link to="/" class="navbar-brand"><a>Stock Trade</a></router-link>
<div class="d-inline" @click="toPortfolio">
<ul class="navbar-nav mr-auto">
<router-link :to="{ name: 'portfolio'}"
tag="li" class="nav-item nav-link"><a
class="text-decoration-none">Portfolio</a></router-link>
</ul>
</div>
<div class="collapse navbar-collapse" @click="toStocks">
<ul class="navbar-nav mr-auto">
<router-link :to="{name: 'stocks'}"
tag="li" class="nav-item nav-link">
<a class="text-decoration-none">Stocks</a>
</router-link>
</ul>
</div>
<div class="collapse navbar-collapse end-day">
<div class="navbar-nav ml-auto">
<li class="nav-item nav-link">End Day</li>
</div>
</div>
<div class="d-inline" @click="isDropping = !isDropping">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Save & Load <span class="dropdown-toggle-no-caret"></span>
</a>
<!-- I must understand why it does not work below-->
<div class="dropdown-menu"
:class="{show: isDropping}"
aria-labelledby="navbarDropdown">
<a class="dropdown-item " href="#">Save Data</a>
<a class="dropdown-item" href="#">Load Data</a>
</div>
</li>
</ul>
</div>
<div>
<!-- Got to add a Getter here instead so "DRY" does not happen with the "EUR" assignment-->
<strong class="navbar-text" style="color: dimgray">Funds: {{$store.state.funds}}</strong>
</div>
</nav>
</template>
<script>
import {mapActions} from 'vuex'
import * as types from '/Users/Dev/WebstormProjects/the-trader-app/src/store/types.js'
export default {
data() {
return {
isDropping: false
}
},
methods: {
...mapActions({
toPortfolio: types.COMMIT_TO_PORTFOLIO,
toStocks: types.COMMIT_TO_STOCKS
})
}
}
</script>
<style scoped>
a {
color: dimgray;
}
a:hover{
color: black !important;
}
.end-day {
cursor: pointer;
}
</style>
Stocks.vue（将在此处显示股票）
<template>
<div class="d-flex flex-wrap justify-content-sm-around">
<transition name="fade">
<div class="wrapper" v-if="showStocks">
<div class="stock-title">
<h4 class="box-headers">BMW</h4>
<p class="box-headers" style="font-size: 13px">(Price: 20 EUR)</p>
</div>
<div class="stock-content">
<input type="text" class="mr-auto" placeholder="How many shares?">
<button>Buy</button>
</div>
</div>
</transition>
<transition name="fade">
<div class="wrapper" v-if="showStocks">
<div class="stock-title">
<h4 class="box-headers">Apple</h4>
<p class="box-headers" style="font-size: 13px">(Price: 20 EUR)</p>
</div>
<div class="stock-content">
<input type="text" class="mr-auto" placeholder="How many shares?">
<button>Buy</button>
</div>
</div>
</transition>
<transition name="fade">
<div class="wrapper" v-if="showStocks">
<div class="stock-title">
<h4 class="box-headers">Facebook</h4>
<p class="box-headers" style="font-size: 13px">(Price: 20 EUR)</p>
</div>
<div class="stock-content">
<input type="text" class="mr-auto" placeholder="How many shares?">
<button>Buy</button>
</div>
</div>
</transition>
<transition name="fade">
<div class="wrapper" v-if="showStocks">
<div class="stock-title">
<h4 class="box-headers">Google</h4>
<p class="box-headers" style="font-size: 13px">(Price: 20 EUR)</p>
</div>
<div class="stock-content">
<input type="text" class="mr-auto" placeholder="How many shares?">
<button>Buy</button>
</div>
</div>
</transition>
</div>
</template>
<script>
import {mapGetters} from 'vuex';
import * as types from '/Users/Dev/WebstormProjects/the-trader-app/src/store/types.js';
export default {
computed: {
...mapGetters({
showStocks: types.GET_STOCKS
})
}
}
</script>
<style scoped>
.wrapper {
border: solid lightgray 1px;
width: 500px;
margin-top: 20px;
border-radius: 5px;
box-shadow: 3px 3px 5px 6px #ccc;
}
.stock-title {
background-color: lightskyblue;
color: royalblue;
display: flex;
flex-wrap: wrap;
padding: 7px 0 0 20px;
}
.box-headers {
display: inline-block;
margin: 0;
padding: 10px -1px 10px 10px;
}
p {
align-self: flex-end;
}
.stock-content {
display: flex;
}
input {
margin: 10px;
padding: 10px;
}
button {
background-color: royalblue;
color: white;
padding: 0 20px;
border-radius: 5px;
justify-self: center;
margin: 10px;
}
::placeholder {
font-size: 15px;
}
.fade-enter {
opacity: 0;
}
.fade-enter-active {
transition: opacity 2s;
}
.fade-leave-active {
transition: opacity 2s;
opacity: 0;
}
</style>
Portfolio.vue
<template>
<div class="d-flex flex-wrap justify-content-sm-around">
<transition name="fade">
<div class="wrapper" v-if="showPortfolio">
<div class="stock-title">
<h4 class="box-headers">BMW</h4>
<p class="box-headers" style="font-size: 13px">(Price: 20 EUR)</p>
</div>
<div class="stock-content">
<input type="text" class="mr-auto" placeholder="How many shares?">
<button>Sell</button>
</div>
</div>
</transition>
<transition name="fade">
<div class="wrapper" v-if="showPortfolio">
<div class="stock-title">
<h4 class="box-headers">Apple</h4>
<p class="box-headers" style="font-size: 13px">(Price: 20 EUR)</p>
</div>
<div class="stock-content">
<input type="text" class="mr-auto" placeholder="How many shares?">
<button>Sell</button>
</div>
</div>
</transition>
<transition name="fade">
<div class="wrapper" v-if="showPortfolio">
<div class="stock-title">
<h4 class="box-headers">Facebook</h4>
<p class="box-headers" style="font-size: 13px">(Price: 20 EUR)</p>
</div>
<div class="stock-content">
<input type="text" class="mr-auto" placeholder="How many shares?">
<button>Sell</button>
</div>
</div>
</transition>
<transition name="fade">
<div class="wrapper" v-if="showPortfolio">
<div class="stock-title">
<h4 class="box-headers">Google</h4>
<p class="box-headers" style="font-size: 13px">(Price: 20 EUR)</p>
</div>
<div class="stock-content">
<input type="text" class="mr-auto" placeholder="How many shares?">
<button>Sell</button>
</div>
</div>
</transition>
</div>
</template>
<script>
import {mapGetters} from 'vuex';
import * as types from '/Users/Dev/WebstormProjects/the-trader-app/src/store/types.js';
export default {
computed: {
...mapGetters({
showPortfolio: types.GET_PORTFOLIO
})
}
}
</script>
<style scoped>
.wrapper {
border: solid lightgray 1px;
width: 500px;
margin-top: 20px;
border-radius: 5px;
box-shadow: 3px 3px 5px 6px #ccc
}
.stock-title {
background-color: #ffbf00;
color: indianred;
display: flex;
flex-wrap: wrap;
padding: 7px 0 0 20px;
}
.box-headers {
display: inline-block;
vertical-align: baseline;
margin: 0;
padding: 10px -1px 10px 10px;
}
.stock-content {
display: flex;
}
p {
align-self: flex-end;
}
input {
margin: 10px;
padding: 10px;
}
button {
background-color: indianred;
color: white;
padding: 0 20px;
border-radius: 5px;
justify-self: center;
margin: 10px;
}
::placeholder {
font-size: 15px;
}
.fade-enter {
opacity: 0;
}
.fade-enter-active {
transition: opacity 2s;
}
.fade-leave-active {
transition: opacity 2s;
opacity: 0;
}
main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";
import 'bootstrap/dist/css/bootstrap.css'
import BootstrapVue from 'bootstrap-vue'
import {store} from "./store/store";
import {routes} from "./routes";
Vue.use(BootstrapVue);
Vue.use(VueRouter);
export const router = new VueRouter({
routes,
mode: 'history',
scrollBehavior(to, from, savedPosition) {
if(savedPosition) {
return savedPosition
}
if (to.hash) {
return {selector: to.hash}
}
return {x: 0, y: 0};
}
});
new Vue({
el: '#app',
store,
router,
render: h => h(App)
});
store.js
import Vue from 'vue'
import Vuex from 'vuex'
import altAnims from "@/store/modules/altAnims";
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
sharesValue: {
BMW: 1,
Apple: 0,
FaceBook: 0,
Google: 0
},
user:{
funds: 1000,
shares: {
BMW: 0,
Apple: 0,
FaceBook: 0,
Google: 0
}
}
},
modules: {
altAnims
}
});
types.js
// Getters
export const GET_PORTFOLIO = 'portfolio/shared';
export const GET_STOCKS = 'stocks/shared';
//Mutations
export const MUTATE_PORTFOLIO = 'shared/SET_PORTFOLIO';
export const MUTATE_STOCKS = 'shared/SET_STOCKS';
//Actions
export const COMMIT_TO_PORTFOLIO = 'shared/ALTERNATE_PORTFOLIO';
export const COMMIT_TO_STOCKS = 'shared/ALTERNATE_STOCKS';
altAnims.js（这是我在这个动画中闲逛的地方）
import * as types from '../types';
const state = {
showStock: false,
showPortfolio: false
};
const getters = {
[types.GET_PORTFOLIO]: state => {
return state.showPortfolio
},
[types.GET_STOCKS]: state => {
return state.showStock
}
};
const mutations = {
[types.MUTATE_PORTFOLIO]: state => {
state.showPortfolio = true;
state.showStock = false
},
[types.MUTATE_STOCKS]: state => {
state.showStock = true;
state.showPortfolio = false
}
};
const actions = {
[types.COMMIT_TO_PORTFOLIO]: ({commit}) => {
commit(types.MUTATE_PORTFOLIO);
},
[types.COMMIT_TO_STOCKS]: ({commit}) => {
commit(types.MUTATE_STOCKS);
}
};
export default {
state,
getters,
mutations,
actions
}
第一期
[我试图做的第一件事是创建一个简单的fade动画，您可以在Stocks.vue和Portfolio.vue文件上看到它们，这些动画应该由@click上的Headers.vue事件触发。] >
[嗯，第一个问题是由于某种原因，当我重新加载页面并触发@click event第一次]
Profile.vue或Stocks.vue中的任何一个时，animation不会发生。但是在彼此之间切换之后，它开始工作。我不明白为什么第一次单击后它不起作用，因为您可以在altAnims.js上将两个项目的state最初设置为false。
const state = { showStock: false, showPortfolio: false };[然后一旦将
action的mutating提交给state，正如您在altAnims.js处的执行过程中看到的，将其Boolean语句反转，您首先会看到v-if应该是在读取getter从state到false的true，您可以在@click看到Header.vue事件的作用>第二期
尽管我一开始没有解决此问题，但我还是尝试着前进。
这是我尝试在[Portfolio.vue中执行的操作
<template> <div class="d-flex flex-wrap justify-content-sm-around"> <transition name="fade"> <div class="wrapper" v-if="revealBMW"> <div class="stock-title"> <h4 class="box-headers">BMW</h4> <p class="box-headers" style="font-size: 13px">(Price: 20 EUR)</p> </div> <div class="stock-content"> <input type="text" class="mr-auto" placeholder="How many shares?"> <button>Sell</button> </div> </div> </transition> <transition name="fade"> <div class="wrapper" v-if="revealApple"> <div class="stock-title"> <h4 class="box-headers">Apple</h4> <p class="box-headers" style="font-size: 13px">(Price: 20 EUR)</p> </div> <div class="stock-content"> <input type="text" class="mr-auto" placeholder="How many shares?"> <button>Sell</button> </div> </div> </transition> <transition name="fade"> <div class="wrapper" v-if="revealFaceBook"> <div class="stock-title"> <h4 class="box-headers">Facebook</h4> <p class="box-headers" style="font-size: 13px">(Price: 20 EUR)</p> </div> <div class="stock-content"> <input type="text" class="mr-auto" placeholder="How many shares?"> <button>Sell</button> </div> </div> </transition> <transition name="fade"> <div class="wrapper" v-if="revealGoogle"> <div class="stock-title"> <h4 class="box-headers">Google</h4> <p class="box-headers" style="font-size: 13px">(Price: 20 EUR)</p> </div> <div class="stock-content"> <input type="text" class="mr-auto" placeholder="How many shares?"> <button>Sell</button> </div> </div> </transition> </div> </template> <script> import {mapGetters} from 'vuex'; import * as types from '/Users/Dev/WebstormProjects/the-trader-app/src/store/types.js'; export default { computed: { ...mapGetters({ showPortfolio: types.GET_PORTFOLIO }) }, methods: { revealBMW(){ if(this.$store.state.sharesValue.BMW > 0) { return this.showPortfolio } }, revealApple(){ if(this.$store.state.sharesValue.Apple > 0) { return this.showPortfolio } }, revealFaceBook(){ if(this.$store.state.sharesValue.FaceBook > 0) { return this.showPortfolio } }, revealGoogle(){ if(this.$store.state.sharesValue.Google > 0) { return this.showPortfolio } } } } </script> <style scoped> .wrapper { border: solid lightgray 1px; width: 500px; margin-top: 20px; border-radius: 5px; box-shadow: 3px 3px 5px 6px #ccc } .stock-title { background-color: #ffbf00; color: indianred; display: flex; flex-wrap: wrap; padding: 7px 0 0 20px; } .box-headers { display: inline-block; vertical-align: baseline; margin: 0; padding: 10px -1px 10px 10px; } .stock-content { display: flex; } p { align-self: flex-end; } input { margin: 10px; padding: 10px; } button { background-color: indianred; color: white; padding: 0 20px; border-radius: 5px; justify-self: center; margin: 10px; } ::placeholder { font-size: 15px; } .fade-enter { opacity: 0; } .fade-enter-active { transition: opacity 2s; } .fade-leave-active { transition: opacity 2s; opacity: 0; } </style>我添加了一些
methods，所以每次我进入此路线时，在altAnims.js的状态下，我只会显示份额数大于0的容器。为了对此进行测试，我对BMW: 1进行了硬编码，最终结果是animation停止工作，宝马股份container也未响应我的methods。我不确定这是否是一个好习惯，也许可以将这些方法放在
computed中，或者我完全不一样。
对于这么长的问题，很抱歉，上面有很多代码块。我正在尝试尽可能详细。
我想获得有关[[两个问题
]的帮助P.S-我刚刚想到的是，是否可以在这种情况下为每个要加载的templates使用container来工作。我没有尝试过，但是有可能吗？预先加油，谢谢！
我正在研究一个关于vue-cli的研究项目，尽管它是一个简单的项目，但我仍在尝试应用我一直在学习的东西。我有一条带两条路线的标头：投资组合股票我设置了...
Here，您可以找到我对这个问题的看法。要寻找的东西：
<route-view>的过渡-使用appear进行了调整，以便在初始渲染和mode="out-in"时进行过渡（只是尝试将其移除以查看效果）Portfolio和Stocks组件以使用v-for从存储中渲染数组数据<transition name="fade" mode="out-in" appear>
<router-view :key="$route.fullPath"/>
</transition>