Examples of how to use a single file in the web Front-end vue vuex, vuevuex

Examples of how to use a single file in the web Front-end vue vuex, vuevuex

What is Vuex?

Vuex is a State Management Mode Designed for Vue. js applications. It uses centralized storage to manage the status of all components of an application, and uses corresponding rules to ensure that the status changes in a predictable manner. Vuex is also integrated with the official Vue debugging tool devtools extension, which provides advanced debugging functions such as time-travel debugging with zero configuration, and status snapshot import and export.

Last time I used an example of addition and subtraction to explain the basic usage of vuex and under what circumstances. This example was briefly presented in a component last time. This time, I extracted vuex from a separate file to manage the status of the entire project in a unified manner.

The last time I also said that if your project is large enough, it would be better to use vuex to manage the status of the entire project. If it is a small project, we will not recommend it to you. Okay, I don't need to mention the code below:

After you have prepared all the projects, you have installed vue-cli, webpack, vuex, and router.

The first step is to create a file named store. js with the following content:

Import Vue from 'vue '// introduce vueimport Vuex from 'vuex' // introduce vuexVue. use (Vuex) // register vuexexport default new Vuex. store ({// exposure and new vuex state: {// equivalent to storing data in the vue in various states of the entire project number: 0}, mutations: {// equivalent to the methods placement method in vue. It defines some values that can be used to call and modify the state value addFun (state, num) {state. number = num }}})

The State management files are all created, and the next step is how to call them.

<Template >{{ numbertxt }}< button @ click = "addfun (1)"> button 1 </button> <button @ click = "addfun (2) "> button 2 </button> </template> <script> import store from 'store. js '// The old example should first introduce export default {store: store, // define computed: {// real-time listening numbertxt () {// real-time listening in the store. the value in js changes return store. state. number }}, methods: {addfun (num) {store. commit ('addfun', num) // change the value in the explicit commit (commit) mutation. }}</script>

Well, this is the example of a slightly complex vuex independent extraction. If you don't know anyone or you like vue, you can join me (nihaomeili87) and make progress together!

Summary

The above is an example of how to use a unique web Front-end vue vuex file. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!