I want to use use vue-router to route to a new component from a Vuex store. Is it possible to access the router from a Vuex store? I've seen a bunch of threads about it, but nothing that really worked for me... The error below is what I get when I try to use the router.
[Vue warn]: Error in mounted hook: "TypeError:
WEBPACK_IMPORTED_MODULE_2_vue_router.a.push is not a function"
Here's my store:
SENTENCE_TRACKER({commit, state}){
let chosenSentence
if(state.currSent < state.res.length) {
chosenSentence = state.res[state.currSent];
console.log(chosenSentence);
commit('CHINESE', {chineseData:chosenSentence.chinese})
commit('ENGLISH', {englishData:chosenSentence.english})
commit('PINYIN', {pinyinData:chosenSentence.pinyin})
commit('AUDIO', {audioData:chosenSentence.audio})
commit('WBW', {wbwData:chosenSentence.wbw})
state.currSent++
} else {
// THIS IS WHERE I'D LIKE TO USE VUE-ROUTER
router.push({path:'/summary'})
}
let arr = []
state.wbw.map(function(i){
arr.push('')
})
commit('WBW_STATE', {wbwStateData: arr})
let shuffled = state.wbw.slice(), i, j, k;
for (i = shuffled.length; i; i--) {
j = Math.floor(Math.random() * i);
k = shuffled[i - 1];
shuffled[i - 1] = shuffled[j];
shuffled[j] = k;
}
commit('SHUFFLED', {shuffledData: shuffled})
},
Thanks!
The answer was that I just had to not use the normal this.$router syntax in the store and instead just do this: router.push({name:'summary'}). Thanks!
Related
I’m trying to implement a drag and drop functionality with a connection line. The connection line has a starting point ([x, y]), which is gathered when the mouse is clicked and a target point ([x, y]) which follows the mouse position and is continuously updated while dragging the element.
The project uses Vue.JS with VUEX store and for the connection line D3.js (linkHorizontal method https://bl.ocks.org/shivasj/b3fb218a556bc15e36ae3152d1c7ec25).
In the main component I have a div where the SVG is inserted:
<div id="svg_lines"></div>
In the main.js File I watch the current mouse position (targetPos), get the start position from the VUEX store (sourcePos) and pass it on to connectTheDots(sourcePos, targetPos).
new Vue({
router,
store,
render: (h) => h(App),
async created() {
window.document.addEventListener('dragover', (e) => {
e = e || window.event;
var dragX = e.pageX, dragY = e.pageY;
store.commit('setConnMousePos', {"x": dragX, "y": dragY});
let sourcePos = this.$store.getters.getConnStartPos;
let targetPos = this.$store.getters.getConnMousePos;
// draw the SVG line
connectTheDots(sourcePos, targetPos);
}, false)
},
}).$mount('#app');
The connectTheDots() function receives sourcePos and targetPos as arguments and should update the target position of D3 linkHorizontal. Here is what I have:
function connectTheDots(sourcePos, targetPos) {
const offset = 2;
const shapeCoords = [{
source: [sourcePos.y + offset, sourcePos.x + offset],
target: [targetPos.y + offset, targetPos.x + offset],
}];
let svg = d3.select('#svg_lines')
.append('svg')
.attr('class', 'test_svgs');
let link = d3.linkHorizontal()
.source((d) => [d.source[1], d.source[0]])
.target((d) => [d.target[1], d.target[0]]);
function render() {
let path = svg.selectAll('path').data(shapeCoords)
path.attr('d', function (d) {
return link(d) + 'Z'
})
path.enter().append('svg:path').attr('d', function (d) {
return link(d) + 'Z'
})
path.exit().remove()
}
render();
}
I stole/modified the code from this post How to update an svg path with d3.js, but can’t get it to work properly.
Instead of updating the path, the function just keeps adding SVGs. See attached images:
Web app: Multiple SVGs are drawn
Console: Multiple SVGs are added to element
What am I missing here?
#BKalra helped me solve this.
This line keeps appending new SVGs:
let svg = d3.select('#svg_lines') .append('svg') .attr('class', 'test_svgs');
So I removed it from the connectTheDots() function.
Here is my solution:
In the main component I added an SVG with a path:
<div id="svg_line_wrapper">
<svg class="svg_line_style">
<path
d="M574,520C574,520,574,520,574,520Z"
></path>
</svg>
</div>
In the connectTheDots() function I don't need to append anymore, I just grap the SVG and update its path:
function connectTheDots(sourcePos, targetPos) {
const offset = 2;
const data = [{
source: [sourcePos.y + offset, sourcePos.x + offset],
target: [targetPos.y + offset, targetPos.x + offset],
}];
let link = d3.linkHorizontal()
.source((d) => [d.source[1], d.source[0]])
.target((d) => [d.target[1], d.target[0]]);
d3.select('#svg_line_wrapper')
.selectAll('path')
.data(data)
.join('path')
.attr('d', link)
.classed('link', true)
}
I am using SVGs to draw lines between components that are related in my app. Currently I am grabbing those elements and getting their position info with document.getElementById() and then using getClientBoundingRect.
This generally works, but there is occasional render wonkiness.
Is there a better way to do this? Perhaps an already existing library that works with VueJs?
Changing the class puts a CSS filter on the shape because you have
.isSelected {
filter: brightness(50%);
}
Now the W3C Filter Effects spec says
The application of the ‘filter’ property to an element formatted with the CSS box model establishes a new stacking context the same way that CSS ‘opacity’ does, and all the element's descendants are rendered together as a group with the filter effect applied to the group as a whole.
So browsers are doing the correct thing per that specification. The new stacking context puts the shape in front of the line.
See also this wontfixed Chromium bug
The problem ended up being because of document.getElementById and z-order
I ended up changing my timer to get the element by ref, and iterate through the children of my component to find it.
Here is the code:
drawLines: function () {
let children = this.$children
let lines = this.lines
lines.splice(0, lines.length)
let scheduleContainer = this.$refs.scheduleContainer
let scheduleContainerRect = scheduleContainer.getBoundingClientRect();
for (let i = 0; i < children.length; i++) {
let child = children[i]
if (child.$props.assignment) {
if (child.$props.assignment.assignmentRequestId != "00000000-0000-0000-0000-000000000000") {
for (let ii = 0; ii < children.length; ii++) {
let child2 = children[ii]
if (child2.$props.assignmentRequest) {
if (child2.$props.assignmentRequest.id == child.$props.assignment.assignmentRequestId) {
let assignmentRect = child.$refs.theContainer.getBoundingClientRect()
let requestRect = child2.$refs.theContainer.getBoundingClientRect()
let x1 = ((assignmentRect.left - scheduleContainerRect.left) + 12.5) + 'px'
let y1 = ((assignmentRect.top - scheduleContainerRect.top) + 12.5) + 'px'
let x2 = ((requestRect.left - scheduleContainerRect.left) + 12.5) + 'px'
let y2 = ((requestRect.top - scheduleContainerRect.top) + 12.5) + 'px'
let line = { 'x1': x1, 'y1': y1, 'x2': x2, 'y2': y2 }
lines.push(line)
}
}
}
}
}
}
},
I'm making a discord bot and I'm trying to make a timer that every second it edits the message to time + 1 second like a real clock (Like 0:00). I'm a noob at this. This is my script:
const Discord = require("discord.js");
exports.run = async(bot, message, args) => {
let timerMessage = await message.channel.send('0');
for (i = 0, 10000000000) {
setTimeout(function() {
timerMessage.edit(timerMessage + 1);
}, 1000);
}
}
module.exports.help = {
name: "timer"
}
I have an error and it says: "Parsing error: Unexpected token )"
I would really appreciate it if you would help me with my problem, Thanks!
(Btw I'm using it in Glitch on Google Chrome)
It says that there's an unexpected token ) because you wrote your loop like this:
for (i = 0, 10000000000) {...}
You forgot to add the third argument (usually i++). Also, if you want it to run 10000000000 times you should write a comparison:
for (let i = 0; i < 10000000000; i++) {...}
I see what you're trying to achieve, but I would do it in a simpler way, using setInterval() instead of setTimeout().
setInterval(() => {
timerMessage.edit(timerMessage + 1);
}, 1000);
You seem to be missing a right parenthesis after the setTimeout function. I am not entirely familiar with what you are doing, but I would try something like this :
const Discord = require("discord.js");
exports.run = async (bot, message, args) => {
let timerMessage = await message.channel.send('0');
for (i = 0, 10000000000) {
setTimeout(function()) {
timerMessage.edit(timerMessage + 1);
}, 1000);
}
}
module.exports.help = {
name: "timer";
}
Although this should (maybe) replace the missing parenthesis in your code, it seems to have many other issues. For example, your for loop does not make much sense. Normally a for loop would look something like this (to repeat a certain number of times in java) :
for (int i = 0; i < 10; i++) {
System.out.println(i);
} // will print numbers 0-9, repeat 10 times
The whole chunk of code with the setTimeout bit seems to be messed up... It would help to have a little more context on what you are trying to do / some commenting in your code.
If you are trying to get into coding, I'd recommend something much more basic or some tutorials. CodingTrain has great coding videos on youtube and you will learn a ton no matter what language you go with. Hope this helped...
Here I am filling the localStorage:
let storageObj = {};
storageObj.date = (new Date().toLocaleString().replace(", ","T"));
storageObj.url = this.responseURL;
localStorage.setItem(storageObj.date, storageObj.url);
In mounted() I am iterate all data from localStorage like:
for(let obj of Object.entries(localStorage))
{
this.lastpasts.push(obj);
}
And placing every Object to lastpasts (located in data() {lastpasts : []}).
In template I want to print only url:
<div class="ui divided items" v-for="el in lastpasts">
<div class="item">
{{el.url}}
</div>
</div>
But this code do not print nothing. Work only {{el}}. It's print in HTML block:
[ "24.06.2017T11:55:10", "362e9cc5-e7e6" ]
[ "24.06.2017T12:26:47", "b0f9f20d-7851" ]
Browser console do not have any errors.
In the chat session we managed to solve his issue.
It was caused by the fact, that he was using Array of Arrays instead of Array of Objects. Because Array can be used only with index, not field name, {{el.url}} was not working.
The code to get values from LocalStorage had to be changed to:
mounted() {
for(let obj of Object.entries(localStorage)) {
var x = {};
x.url = obj[0];
x.date = obj[1];
this.lastpasts.push(x);
}
}
Now, it is possible to use {{el.url}}
I'm fairly new to React native, and i would like to have all my endpoints URLs in the same place
So, i have in my environement.js:
module.exports = {
SERVER: 'http://url.com',
API_VERSION: '/api/v3',
FULL_URL: this.SERVER + this.API_VERSION,
PLAYERS: this.FULL_URL + '/players',
TEAMS: this.FULL_URL + '/teams',
};
And on the other side in getGame.js
GLOBAL = require('../environement');
function getGame() {
console.log(GLOBAL.PLAYERS)
}
When i run my app i got
undefined/players
What am i doing wrong?
Thanks
You can try something like this using ES6.
const SERVER = 'http://url.com';
const API_VERSION = '/api/v3';
export const FULL_URL = SERVER + API_VERSION;
export const PLAYERS = FULL_URL + '/players';
export const TEAMS = FULL_URL + '/teams';
And then
import { FULL_URL, PLAYERS, TEAMS } from 'path/to/the/file'
Please take a look to this solution: https://github.com/luggit/react-native-config .
Also it will be very helpful when you will be have a few different environments and build agent for app in teamcity for example.