introduceVuex is a mechanism for managing the global state (data) of components, which can easily realize data sharing between components. start Install ① Direct download method Create a vuex.js file and put the content of the URL ②CND method<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script> ③NPM methodnpm install vuex --save ④Yarn methodyarn add vuex How to use NPM installation1. Create a store/index.js folder in the scr file and write the following content. import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: {}, mutations: {}, actions: {}, modules: {} }) 2. Import it in main.js and then mount it to the Vue instance import Vue from 'vue' import store from './store' new Vue({ render: h => h(App), store }).$mount('#app') Store concept and usageconcept:It is used to share data between components. Only mutations can modify data in the store. use: Define before use definitionstate: { num: 0 } useMethod 1 (recommended) <div>{{ numAlias }}</div> import { mapState } from 'vuex' export default { //Calculation function computed: mapState({ // Passing the string parameter 'count' is equivalent to `state => state.count` numAlias: 'num', // Common key is a name you give yourself, value is the data you receive // Arrow function can make the code more concise count: state => state.count, // In order to be able to use `this` to get the local state, you must use the regular function countPlusLocalState (state) { return state.count + this.localCount } //You can define other calculation functions}), //Or like this //Calculated function computed: { mapState(['count']) } } Method 2 <div>{{ $store.state.count }}</div> Mutations concept and usageconcept:Modify the data in the store. Strictly prohibit modifying the data in other places. Do not perform asynchronous operations in mutations. Mutations must be executed synchronously and cannot be executed asynchronously. use:Define the method before using it definitionmutations: //increment custom method store parameter is store data, parameter parameter is received data, do not increment (state, parameter) { // Change state state.num++ } } useMethod 1 (recommended) import { mapState, mapMutations } from 'vuex' //Methods: { ...mapMutations([ // mutations custom method name 'increment' ]), love() { // Directly this calls this.increment('The data that needs to be passed is not needed') this.increment('Bin') } } Method 2 methods: { love() { // this.$store.commit('custom name', 'data passed may not be passed') this.$store.commit('increment', 'data') } } Action concept and usageconcept:Used to handle asynchronous operations. If you want to change data through asynchronous operations, you must use actions instead of mutations. However, you still need to indirectly change data by triggering mutations in actions. Action is similar to mutation, except that:
definitionmutations: //increment custom method store parameter is store data, parameter parameter is received data, do not increment (state, parameter) { // Change state state.num++ } }, actions: { //add custom method context is a parameter, you can treat it as an instance of vuex add(context) { //You can use context.commit('method to be called in mutations') context.commit('increment') } } useMethod 1 (recommended) import { mapState, mapMutations, mapActions } from 'vuex' export default { methods: { ...mapActions([ 'add', // Map `this.add()` to `this.$store.dispatch('add')` // `mapActions` also supports payloads: 'add' // maps `this.add(amount)` to `this.$store.dispatch('add', amount)` ]), ...mapActions({ add: 'add' // Map `this.add()` to `this.$store.dispatch('increment')` }), love() { // Directly call this.add('The data that needs to be passed is not needed') this.add(data) } } } Method 2 methods: { love() { // this.$store.dispatch('custom name', 'data passed may not be passed') this.$store.dispatch('add', data) } } Concept and use of gettersconcept:Getter is used to process the data in the store to form new data. Getting can process the existing data in the store to form new data, similar to the calculation abbreviation of Vue. definitionstate: { num: 0 }, getters: { doneTodos: state => { return state.num = 10 } } useMethod 1 (recommended) <div>{{ doneTodos }}</div> import { mapState, mapMutations, mapActions, mapGetters } from 'vuex' export default { //Calculation function computed: { ...mapState(['count']), ...mapmapGetters(['doneTodos']) } } Method 2 <div>{{ $store.getters.doneTodos }}</div> SummarizeThis article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM! You may also be interested in:
|
<<: A simple way to put HTML footer at the bottom of the page
>>: MySQL data aggregation and grouping
Table of contents Preface Confusing undefined and...
This article shares the specific code of js to re...
Today's web designs tend to display very larg...
This article shares the specific code for JavaScr...
The principle of uploading pictures on the front ...
1. Introduction Recently, I often encounter devel...
Preface To delete a table, the command that comes...
This article example shares the specific code of ...
Logpoint-based replication 1. Create a dedicated ...
Occasionally, I need to group select contents. In ...
Table of contents vite Build Configuration vite.c...
Requirement: Celery is introduced in Django. When...
background Solving browser compatibility issues i...
In this article, I will show you how to develop a...
Table of contents background LIMIT Optimization O...