Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "vuex state management data state query and change method". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

State Management data State query and change 1.main.js introduces state management import store from'. / store' new Vue ({el:'# app', router, store, components: {App}, template:'}) 2.store creation import Vue from 'vue'import Vuex from' vuex'import errorLog from'. / modules/user'const getters= {name: state = > state.user.name,}

Vue.use (Vuex)

Const store = new Vuex.Store ({modules: {user}, getters}) export default store

The content in user.js defines only one way to modify name in store.

Since the only way to change store in vuex is to submit mutation, you can change the state value by calling the corresponding method in the instantiated vuex,mutations, where name can be a parameter object or a single value. The state parameter defaults to not passing the first parameter when it is called, but state must be passed when declaring the function in mutations.

Mutations: {SET_NAME: (state, name) = > {state.name = name}} export default user

In the sub-component through this.$store.state. The variable name accesses the value of a variable in the state in the subcomponent

This.user.name = this.$store.state.name / / where name is the variable name of the state stored in vuex

Update / insert the data state in vuex through this.$store.commit ('method name', parameter) in the subcomponent

/ / Update the status this.$store.commit ("name", userName) in store in the sub-component / / where userName is the incoming parameter vuex data management, and the component data corresponds one to one.

Requirements: we click to take photos and put the photos into the state of vuex for management, and call them to other components (here named after component An and component B)

1. Component A: we got the picture data source

And create a current time when you click to take a picture, and submit the image source and time to the vuex as an object.

Var url = canvas.toDataURL (); var date=new Date (). ToLocaleTimeString () this.$store.commit ("canvass", {url,date}); 2. Vuex (first remember to download and install vuex, omitted here) import Vue from 'vue';import Vuex from' vuex';Vue.use (Vuex); var state= {/ / state objects to be set for global access canvass: [] / / pictures and time are saved here} Var getters = {/ / Real-time listen for changes in state values (latest status) getCanvass (state) {/ / load the value of the changed getCanvass, call return state.canvass}} to component B; var mutations = {canvass (state,datalist) {/ / data submitted by component A to save state.canvass.unshift (datalist)}} in canvass; var actions = {} Var store = new Vuex.Store ({state, getters, mutations, actions}); export default store;3. Component B

Html

{{i.date}}

Vue

Data () {return {imglist: [], / / default picture time data url: [], / / corresponding picture time data flag:true};}, created () {this.imglist = this.$store.getters.getCanvass / / get the canvass data in getters in vuex} methods: {doImg (url) {this.url = url.split ("??"); / / Save the picture time data to the current nearest url array after clicking the button. This.flag=false}} approximate effect

In this way, when we do not take a picture to enter the page, it is blank. Of course, after we take a picture, we go to the page. By default, which one is the latest one? component B will show several time points after taking several photos in component A. Click on the right side of different time points to show the photos taken at different time points.

This is the end of the content of "vuex state management data state query and change method". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.