text: In a Vue project, if the project is simple, the data transfer between parent and child components can be passed using props or $emit etc.
  But if it is a large and medium-sized project, it is often necessary to transfer data between unrelated parallel components, and many data require multiple components to be recycled. At this time, using the above method will make the project code verbose, and is not conducive to the reuse of components, which improves the degree of coupling.
  Vue’s state management tool Vuex perfectly solves this problem.
  I looked at the official website of vuex, and I don’t think it is very easy to understand. Sometimes we just need to dynamically get data from a component (the official website is called “component level”: it is an independent control, and the scope of action is only within the component) and then I want to put it in a place called “application level” by the official website (it can be accessed and dynamically modified anywhere in the project. After the modification, vue will update your entire project). This is the reason why I first came to learn vue. I didn’t want to make a front-end data structure library. . .
  Let’s take a look at my small example step by step
  First install vuex. The company project has been migrated from vue1.0 to vue2.0 by me, download and install vue
  npm install vuex –save
  Then create a new folder store at the same level as index.html, and create a new index.js file in the folder. This file is used to assemble the module and export the store file
  [1. Get the data in the store]
  import Vue from ' vue ' import Vuex from ' vuex ' // Tell vue to "use" vuex Vue.use(Vuex) // Create an object to save the initial state when the application starts // The state that needs to be maintained const store = new Vuex.Store({ state: { // Place the initial global initial value when the app is started bankInf: { " name " : " I am the first data of vuex " , " id " : 100 , " bankName " : " Bank of China " } } }) // Integrate the initial state and change function, we get the store we need //So far, this store can be connected to our application export default store
  Register the store in the vue root file so that all components can use the data in the store
  My project file structure:
  Register store in the main.js file
  import Vue from ' vue ' import App from ' ./App ' import router from ' ./router ' import store from ' ./../store/index ' /* eslint-disable no-new */ new Vue({ el: ' #app ' , router, store, template: ' <App/> ' , components: {App} })
  This simple first step is complete. You can use the data in the store in any component. The method of use is also very simple, that is, use the calculated attribute to return the data in the store to a new attribute, and then you can use it in your template. Use this attribute value:
  In any component:
  export default { ... computed: { bankName() { return this .$store.state.bankInf.bankName; } }, ... }
  The bankName attribute can be used directly in the template, which is the Bank of China in the store
  [Two, modify the state in the store in the component]
  Add html template to any component
  <div class = " bank " > <list-header :</list-header> 04Bank Details Page <input name= "" v- <button type= " button " name= " Get data " @</button> </div>
  Then submit the mutation in the component
  export default { ... computed: { bankName() { return this .$store.state.bankInf.bankName; } }, methods: { newBankName: function() { this .$store.commit( ' newBankName ' , this .textValue) } } ... }
  Add mutations to index.js in the store:
  const store = new Vuex.Store({ state: { // Place the initial global initial value when the app is started bankInf: { " name " : " I am the first data of vuex " , " id " : 100 , " bankName " : " Bank of China " }, count: 0 }, mutations: { newBankName(state,msg) { state.bankInf.bankName = msg; } } })
  In this way, you find that when you click the submit button, the page has displayed the data you modified, and all the data in the place where this component is reused has been updated by Vue;
  If you find an error this.$store.commit is not a function during use, please open the configuration file package.json of your project and check the version of vuex you are using. I am using vuex2.0,
  If you want to delete the old version of vuex and install the new version of vuex, please use
  npm rm vuex –save
  Then install the latest vuex
  npm install vuex –save
  You can solve this error, or check the vuex official website api to modify the statement submitted to the mutation
  Read More:
  - [Solved] Vue + uniapp Uncaught TypeError: Cannot read property ‘getters‘ of undefined
  - [Solved] Vue Error: Failed to mount component: template or render function not defined
  - Vue3 Warning: [Vue warn]: Extraneous non-emits event listeners (changeParentProps) were passed to component
  - Unknown custom element: [xxx] – did you register the component correctly…
  - The use of vue-echarts and compilation error solutions
  - Vue Error compiling template: Component template should contain exactly one root element. If you
  - Taro Error: chunk common [mini-css-extract-plugin] Conflicting order between: ……
  - Fetch Error: Failed to execute ‘fetch’ on ‘Window’: Request with GET/HEAD method cannot have body
  - [Solved] Error: The slice reducer for key “auth“ returned undefined during initialization. If the state pas
  - Solution of Vue router loading components on demand
  - [Solved] Vscode Error: “export ‘default‘ (imported as ‘VueRouter‘) was not found in ‘vue-router‘
  - [How to Solve Vue warn]: Unknown custom element: did you register the component correctly?
  - [Solved] Vue Error: Uncaught TypeError: Cannot read property ‘getters‘ of undefined
  - [Vue warn]: Error in render: TypeError: Cannot read property ‘xxxx’of undefined
  - How to Solve Import antd Error: Module build failed
  - Attributeerror encountered when using ceilometer and gnocchi to execute commands related to gnocchi metric list: _Environ instance has no attribute ‘
  - Taro Use React Hooks Error: TypeError: Object(…) is not a function
  - Using elementui El-dialog as a subcomponent to close an error
  - [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed [Solved]