How to understand the simple store of vue

This article mainly introduces "how to understand the simple store of vue". In the daily operation, I believe many people have doubts about how to understand the simple store of vue. The editor consulted all kinds of materials and sorted out the simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how to understand the simple store of vue"! Next, please follow the editor to study!

The simplest application of store in vue is global storage.

I use two components here to jump to each other (Helloworld.vue and twopage.vue), the former for putting data into store, and the latter for fetching data from store.

First, you need to install vuex: npm install vuex-- save

Because of the jump, it is necessary to install routing router:npm install vue-router-save.

Create a new store folder. Create a new modules folder, getters.js, index.js in it.

Build mystate.js in modules

Put our variable msg in mystate:

Const state = {msg: 'this is my status',} export default {state}

Getters puts the key-value pairs of our operation variables:

Const getters = {msg:state = > state.mystate.msg,} export default getters

Index is used to configure and create vuex.store:

Import Vue from 'vue'import Vuex from' vuex'import getters from'. / getters'Vue.use (Vuex) / / https://webpack.js.org/guides/dependency-management/#requirecontextconst modulesFiles = require.context ('. / modules', true, /\ .js $/) / / it will automatically require all vuex modules in the module file / / you do not need `import app from'. / modules/app' `/ / it will auto require all vuex module from modules fileconst modules = modulesFiles.keys (). Reduce ((modules ModulePath) = > {/ / set'. / app.js' = > 'app' const moduleName = modulePath.replace (/ ^\.\ / (. *)\.\) const value = modulesFiles (modulePath) modules [moduleName] = value.default return modules}, {}) const store = new Vuex.Store ({modules, getters,}) export default store

You need to call store and router in the vue instance of main.js (the routing of the two pages is later):

Import Vue from 'vue'import Vuex from' vuex'import getters from'. / getters'Vue.use (Vuex) / / https://webpack.js.org/guides/dependency-management/#requirecontextconst modulesFiles = require.context ('. / modules', true, /\ .js $/) / / it will automatically require all vuex modules in the module file / / you do not need `import app from'. / modules/app' `/ / it will auto require all vuex module from modules fileconst modules = modulesFiles.keys (). Reduce ((modules ModulePath) = > {/ / set'. / app.js' = > 'app' const moduleName = modulePath.replace (/ ^\.\ / (. *)\.\) const value = modulesFiles (modulePath) modules [moduleName] = value.default return modules}, {}) const store = new Vuex.Store ({modules, getters,}) export default store

Configure two routes in index.js under router:

Import Vue from 'vue'import Vuex from' vuex'import getters from'. / getters'Vue.use (Vuex) / / https://webpack.js.org/guides/dependency-management/#requirecontextconst modulesFiles = require.context ('. / modules', true, /\ .js $/) / / it will automatically require all vuex modules in the module file / / you do not need `import app from'. / modules/app' `/ / it will auto require all vuex module from modules fileconst modules = modulesFiles.keys (). Reduce ((modules ModulePath) = > {/ / set'. / app.js' = > 'app' const moduleName = modulePath.replace (/ ^\.\ / (. *)\.\) const value = modulesFiles (modulePath) modules [moduleName] = value.default return modules}, {}) const store = new Vuex.Store ({modules, getters,}) export default store

Use the routing view in App.vue:

Export default {name: 'App'} # app {font-family:' Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; text-align: center; color: # 2c3e50; margin-top: 60px;}

Finally, there are two page components, HelloWorld.vue:

Binds bidirectionally and listens to msg, putting the new value of msg in the global variable.

The method of snooping trigger is setstate.

SessionStorage.setItem ('msg', value) is used to put the value of value into the value corresponding to the key called msg, that is, the key-value pair stored by getters.js.

{{msg}} I'm going to the second page export default {name: "HelloWorld", data () {return {msg: "Welcome to's new vue project",};}, methods: {setstate (value) {sessionStorage.setItem ('msg', value);},}, watch: {msg (newName, oldName) {this.setstate (newName);},},} A {color: # 42b983;}

In the second page component twopage.vue, you need to take out the stored msg:

SessionStorage.getItem ('msg') gets the value corresponding to the msg key.

This is the second page {{msg}} I'm going back to export default {data () {return {msg: ",};}, methods: {setmsg () {this.msg = sessionStorage.getItem ('msg');},}, created () {this.setmsg ()}}

Directory structure:

At this point, the study of "how to understand the simple store of vue" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!