A todoList small demo, data is made based on vue.js and vuex to be stored in vuex.
listlocalstoragevuejswatch
mutation:
:
this feels so bulky and troublesome, and the essential requirement is to "monitor" changes in list and do a unified treatment. How to do it?
made an online demo, god to help take a look at the demand:
https://codepen.io/quiettroja.
//
computed: {
changeMemberTab() {
return this.$store.state.changeMemberTab;
}
},
//
watch: {
changeMemberTab(val) {
document
.getElementById("memberTabHeader")
.getElementsByTagName("li")[this.$store.state.changeMemberTab].click();
}
},have a suggestion:
in fact, you encapsulate the utils.js yourself and then encapsulate the setLocalStorage, but it is still used directly in the mutations, and it is not in the component when you set it up, it is still in the unified store
.and mutations names are suggested to be capitalized
you can see that the getter, of vuex is equivalent to the calculation property of store. But I don't think you can save much of your repetitive code in this line of code
computed: {
watchTodo() {
return this.$store.getters.todo.length;
}
},
watch: {
watchTodo: {
handler(newVal, oldVal) {
console.log("changed");
storage.set("todo", this.$store.state.todoThings);
},
deep: true
}
},can listen for operations, and storage is encapsulated
can be monitored, as long as
import {mapState} from 'vuex'
computed: {
...mapState(['list'])
},
watch: {
list: {
handler: newVal=>{
localStorage.setItem('todo-list',JSON.stringify(newVal))
},
deep: true
}
}Previous: Vue-router, level 2 routing skipping level 3 routing error
Next: Mailto chrome does not skip forward email and report error
vue a rookie to solve, the code is component .vue <template> <div class="top-ad-section" v-bind:class="{ show: isShowAdStatus }">< div> < template> <script> export default { mounted() { setT...
try to get store data in the route file, but the undefined vuexmodule modulestore is displayed. ...
after searching around, I didn t see this tutorial. put the vuex data into the data before the dom is mounted, but the data is not available in the created. ...
...
the configuration related to vuex is as follows < hr > const mutations = { incrementment( state,payload ){ state.numb+= payload.amount; }, reducement( state ){ state.numb-- ; }, [SOME_MUTATION](){ state.numb+...
I m going to assign the default value of 1 to the value of the drop-down box and bind this variable; <select v-model= selectValue >< select> but just let data(){ return{ selectValue:1 } } this type of writing is not readable, so I ...
data file mutations.js item.textdelete iditem.textpropundefined click question and answer:, mutation API accepts only two parameters ...
I have referenced another component in one component. What can I do to refresh the referenced component when a value changes? or call the destroy method of another component in the current component ...
I need the js file in plugins or assets to call the mutation method add . How can I call it correctly? ...
The main purpose of Vuex is to share and manage data, so why not just use browser caching? what is the fundamental difference between Vuex and browser caching strategy? the data flow in the Vuex state repository is unidirectional Synchronize, so why...
the official document says that asynchronous modification of the state will not take effect: https: vuex.vuejs.org zh-cn . but the following code does change the value: mutations: { increment: (state)=>{ window.fetch( https: jsonp...
in Vuex State document : when a component needs to acquire multiple states, declaring these states as computational properties can be repetitive and redundant. To solve this problem, we can use the mapState helper function to help us generate computa...
A method in methods is called in mounted in the same component. but the use of error-free mounted in methods prompts $store is undefine as soon as it is called. Excuse me, what s going on? ...
<div v-for="src of item.images" class="img2" :style="{backgroundImage: url( +src+ ) }">< div> item.images=[ http: xx 1.jpg , http: xx 2.jpg , http: xx 3.jpg ]; srcbackgroundImageurl : ...
Let s talk about the directory structure first: src api login.js store getters.js index.js modules user.js utils request.js axios the problem is that now I want to use vuex, in request.js, but after I intro...
requirements: in the original Mini Program, the setting and acquisition of the user s openId was accomplished through the operation of App.gloabalData . Now using mpvue to develop a new Mini Program, how to deal with this kind of data that needs to b...
uses the login permission judgment in vue-element-admin, which is basically introduced and loaded according to it, but it still prompts you to report an error main.js . import Vue from vue import App from . App import router from . router i...
1. Two identical functions, same method, one valid, one invalid 2. Invalid code: <Row :gutter="10" style="margin-top: 10px" v-for="(col, index) in categoryList" :key="index"> <Col span="4"...
vue project, after refreshing, the data in store is lost. I use localstorage to store it. When I take it out, I find that the page will report an error. I don t know why. Code: login: methods: { ...mapMutations([ SET_USER , ]), ...
after the login is successful, save the login information to localStorage. The login registration should be changed to the user name on the home page after login, and the drop-down selection should be included. In the component, I judge which part of th...