1, Summary
One sentence summary:
1. Modify data mutations: data in state cannot be modified directly. If you want to modify it, you must use mutations
2. [get data this.$store.state. * *]: if the component wants to get data directly from the state, it needs this.$store.state***
3. [this.$store.commit('name of method ', only one parameter)]: if a component wants to modify data, it must use the methods provided by mutations. It needs to use this.$store.commit('name of method', only one parameter)
4. [getters to package data]: if the data on the state in the store needs to be packaged at the time of external supply, it is recommended to use getters. If you need to use getters, use this.$store.getters***
1. What is the applicable scenario of vuex?
Only shared data has the right to be put into vuex; private data within components can be put into component data;
Vuex was born to save the shared data between components. If there is data to be shared between components, it can be directly mounted in vuex instead of passing values between parent and child components. If the data of components does not need to be shared, then these private data that do not need to be shared need not be put into vuex;
The difference between props and data and vuex;
2. What are the States and mutations in vuex?
The state in vuex is equivalent to the data in the component, and the iterations are used to modify the data in the state relative to the methods in the component
3. Why are there musings in vuex?
Because vuex is a public data warehouse, it is not recommended to modify data directly from outside. Therefore, musizations is like a doorman. If you want to modify data from outside, tell me, I will help you modify it
4. There are at most two parameters in the function parameter list of mutations. Among them, parameter 1: state; parameter 2: parameters submitted through commit. What if you want to pass multiple parameters?
The second parameter can be passed to array or object, which is equivalent to passing multiple parameters
// Entry file import Vue from 'vue' // To configure vuex To // 1. Function cnpm i vuex -S // 2. Import package import Vuex from 'vuex' // 3. register vuex reach vue in Vue.use(Vuex) // 4. new Vuex.Store() Instance to get a data warehousing object var store = new Vuex.Store({ state: { // You can state Think of it as data ,Dedicated to storing data // If in a component, you want to access, store Data in, only through this.$store.state.*** To visit count: 0 }, mutations: { // Note: if you want to operate store Medium state Value, only by calling mutations The method provided can only operate the corresponding data. Direct operation is not recommended state In case of data disorder, the data in cannot be quickly located to the cause of the error, because each component may have a method to operate the data; increment(state) { state.count++ }, // Note: if the component wants to call mutations Method in, can only be used this.$store.commit('Method name') // This call mutations The format of the method, and this.$emit('Method name in parent component') subtract(state, obj) { // be careful: mutations In the function parameter list of, at most two parameters are supported. Among them, parameter 1: Yes state Status; parameter 2: Pass commit Submitted parameters; console.log(obj) state.count -= (obj.c + obj.d) } }, getters: { // Note: here getters， Only responsible for providing data to the outside world, not for modifying data. If you want to modify state Data in, please go to mutations optCount: function (state) { return 'Current latest count The values are:' + state.count } // After our review and comparison, we found that getters The method in is similar to the filter in the component, because the filter and getters None of the original data has been modified, but the original data has been packaged and provided to the caller; // secondly, getters Also with computed More like, as long as state The data in has changed, so if getters This data is also referenced, so it will be triggered immediately getters Re evaluation of; } })
5. What is the role of getters in vuex?
1. [only responsible for providing data externally, not for modifying data]: getters in vuex are only responsible for providing data externally, not for modifying data. If you want to modify data in state, please go to mutations
2. [similar to filter]: after our review and comparison, we found that the methods in getters are similar to the filters in components, because both filters and getters do not modify the original data, they make a layer of packaging of the original data and provide it to the caller;
3. [similar to computed]: secondly, getters are also similar to computed. As long as the data in the state changes, if getters also reference the data, the re evaluation of getters will be triggered immediately;
getters: { // Note: here getters， Only responsible for providing data to the outside world, not for modifying data. If you want to modify state Data in, please go to mutations optCount: function (state) { return 'Current latest count The values are:' + state.count } // After our review and comparison, we found that getters The method in is similar to the filter in the component, because the filter and getters The original data has not been modified. The original data has been packaged and provided to the caller; // secondly, getters Also with computed More like, as long as state The data in has changed, so if getters This data is also referenced, so it will be triggered immediately getters Re evaluation of; }
2, vuex
Video location of corresponding courses of Blog:
// Entry file import Vue from 'vue' // To configure vuex To // 1. Function cnpm i vuex -S // 2. Import package import Vuex from 'vuex' // 3. register vuex reach vue in Vue.use(Vuex) // 4. new Vuex.Store() Instance to get a data warehousing object var store = new Vuex.Store({ state: { // You can state Think of it as data ,Dedicated to storing data // If in a component, you want to access, store Data in, only through this.$store.state.*** To visit count: 0 }, mutations: { // Note: if you want to operate store Medium state Value, only by calling mutations The method provided can only operate the corresponding data. Direct operation is not recommended state In case of data disorder, the data in cannot be quickly located to the cause of the error, because each component may have a method to operate the data; increment(state) { state.count++ }, // Note: if the component wants to call mutations Method in, can only be used this.$store.commit('Method name') // This call mutations The format of the method, and this.$emit('Method name in parent component') subtract(state, obj) { // be careful: mutations In the function parameter list of, at most two parameters are supported. Among them, parameter 1: Yes state Status; parameter 2: Pass commit Submitted parameters; console.log(obj) state.count -= (obj.c + obj.d) } }, getters: { // Note: here getters， Only responsible for providing data to the outside world, not for modifying data. If you want to modify state Data in, please go to mutations optCount: function (state) { return 'Current latest count The values are:' + state.count } // After our review and comparison, we found that getters The method in is similar to the filter in the component, because the filter and getters The original data has not been modified. The original data has been packaged and provided to the caller; // secondly, getters Also with computed More like, as long as state The data in has changed, so if getters This data is also referenced, so it will be triggered immediately getters Re evaluation of; } }) // Summary: // 1. state The data in cannot be modified directly. If you want to modify it, you must pass the mutations // 2. If the component wants to directly from state Get data on: required this.$store.state.*** // 3. If you want to modify the data, you must use the mutations The method provided needs to pass this.$store.commit('Name of the method'， Only one parameter) // 4. If store in state For the data on, a layer of packaging is needed when it is provided to the outside world. Then, it is recommended to use getters, If you need to use getters ,Then use this.$store.getters.*** import App from './App.vue' const vm = new Vue({ el: '#app', render: c => c(App), store // 5. take vuex Created store Mount to VM On the instance, just mount to vm Any component can be used store To access data })