Detailed explanation of Vue's simple store

Detailed explanation of Vue's simple store

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 is used to put data into the store, and the latter is used to get data from the store.

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

Because you need to jump, you have to install the router: npm install vue-router --save

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

Create mystate.js in modules

insert image description here

Put our variable msg in mystate:

const state = {
    msg: 'This is my status',
}
export default {
    state
}

Getters hold the key-value pairs of the variables we operate on:

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/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)
// It will automatically require all vuex modules in your module file // you do not need `import app from './modules/app'`
// it will auto require all vuex modules from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  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 routes of the two pages are later):

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)
// It will automatically require all vuex modules in your module file // you do not need `import app from './modules/app'`
// it will auto require all vuex modules from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  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/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)
// It will automatically require all vuex modules in your module file // you do not need `import app from './modules/app'`
// it will auto require all vuex modules from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})
const store = new Vuex.Store({
  modules,
  getters,
})
export default store

Use the route view in App.vue:

<template>
  <div id="app">
   <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style>
#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;
}
</style>

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

Two-way binding and monitoring of msg, putting the new value of msg into the global variable.

The method for monitoring triggering is setstate;

sessionStorage.setItem('msg', value) is used to put the value of value into the value corresponding to the key called msg, which is the key-value pair stored in getters.js .

<template>
  <div class="hello">
    <img src="../assets/logo.png" />
    <br />
    <input v-model="msg"/>
    <h2>{{ msg }}</h2>
    <router-link to="/two">I want to go to the second page</router-link>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to new vue project",
    };
  },
  methods: {
    setstate(value) {
      sessionStorage.setItem('msg', value);
    },
  },
  watch:
    msg(newName, oldName) {
      this.setstate(newName);
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
a {
  color: #42b983;
}
</style>

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.

<template>
  <div>
    This is the second page<h2>{{ msg }}</h2>
    <router-link to="/">I want to go back</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "",
    };
  },
  methods: {
    setmsg() {
        this.msg = sessionStorage.getItem('msg');
    },
  },
  created(){
      this.setmsg()
  }
};
</script>

Directory structure:

insert image description here

Demo:

Initial state:

insert image description here

To change the content of the input box:

insert image description here

Go to the second page:

insert image description here

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:
  • Detailed explanation of the use of store in vuex in vue.js state management
  • Detailed explanation of monitoring changes in variables defined in $store in Vue components
  • Detailed explanation of two ways of vuex data transmission and the solution to this.$store undefined
  • Detailed explanation of the modular splitting practice of Store under Vuex
  • Detailed explanation of vuex store source code

<<:  Steps to build MHA architecture deployment in MySQL

>>:  Nginx Service Quick Start Tutorial

Recommend

Analysis of CocosCreator's new resource management system

Table of contents 1. Resources and Construction 1...

Detailed explanation of CocosCreator MVC architecture

Overview This article will introduce the MVC arch...

Usage and best practice guide for watch in Vue3

Table of contents Preface🌟 1. API Introduction 2....

Detailed explanation of Vue's custom event content distribution

1. This is a bit complicated to understand, I hop...

How to deploy springcloud project with Docker

Table of contents Docker image download Start mys...

Solution ideas and implementation steps for the problem of css and js becoming invalid after struts2 jump

When the jsp that is jumped to after the struts2 a...

MySQL Series Database Design Three Paradigm Tutorial Examples

Table of contents 1. Knowledge description of the...

Use three.js to achieve cool acid style 3D page effects

This article mainly introduces how to use the Rea...

Angular Dependency Injection Explained

Table of contents Overview 1. Dependency Injectio...

Summary of SQL query optimization knowledge points for MySQL tens of millions of big data

1. To optimize the query, try to avoid full table...

Detailed explanation of the role and working principle of MySQL master-slave replication

1. What is master-slave replication? Master-slave...

Vuex combines session storage data to solve the problem of data loss when refreshing the page

Table of contents Preface 1. Reasons: 2. Solution...

Pure CSS implementation of radio and checkbox effect example

radio-and-checkbox Pure CSS to achieve radio and ...

Solution to running out of MySQL's auto-increment ID (primary key)

There are many types of auto-increment IDs used i...

Thoughts on copy_{to, from}_user() in the Linux kernel

Table of contents 1. What is copy_{to,from}_user(...