Managing public data status using Vuex

What is VueX

1. vuex is a dedicated vue.js Application open state management mode.

2. Use centralized storage to manage the state of all components of the application.

3. And the corresponding rules ensure that changes can be made in a predictable way.

My understanding: public data state warehouse

 

2, Application scenario

1. Multiple views depend on the same state. (read)

2. Behaviors from different views need to change the same state. (modified)

My understanding: it feels more suitable for complex single page applications

 

3, Components of Vuex

  • State -- Data Warehouse
    Used to store data in Vuex, State itself is a json object
     
  • Getter -- used to get data
    In fact, you can get all the data by instantiating state. You can derive some states from state by using getter
     
  • Music -- used to modify data (synchronous operation to modify data)
    Submit through commit. In essence, it is a function to modify the data State in the State.
     
  • Action -- used to submit a mutation (asynchronous operation)
    It's equivalent to wrapping a layer of Mution to realize asynchronous operation.

In fact, there is also a modularization, which is to write the above four packaging sub modules.

 

4, Installing Vuex

  1. Package to install vuex: npm install vuex
  2. Create an instance of vuex: new Vuex.store()
  3. stay main.js Mount Vuex to vue object

5, Practical installation

 

1. Create a project first (as I wrote in Vue cli earlier)

Just type the command in the Terminal of the development tool and then run the file name vue init webpack XXXX (note the location of the root path). You can choose any option you like, or see the introduction in Vuecli above.

vue init webpack vuex_demo

After creation, open it with development tools.

You can see that the current project dependency does not have Vuex.

You can start npm run dev, click the open page, and install a Vue devtools for Google browser to debug Vue

 

2,npm install vuex

After the command is executed, you can see that there is already a vuex in the project

 

3. Create a Vuex instance

main.js

 

import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
 
Vue.config.productionTip = false
 
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0
  }
})
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})

After creation, npm run dev can see the data warehouse on the debug page

6, Use (Count + + instance)

1. Implementation steps:

  • Create the count field in state,
  • Create a count + + mutation in mutation
  • Create a button in the component page to increase the click event to trigger the mutation to change the count value.

2. Instance code

Directory structure: a root Vue App.vue There are two components. The value of count is displayed in both components. See if they are updated if they are modified

 

main.js

ditto

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <componentFirst></componentFirst>
    <componentSecond></componentSecond>
    <h1>Root component count Counter {{count_value}}</h1>
    <button @click="increase_method">Click autoincrement</button>
  </div>
</template>
 
<script>
import componentFirst from './components/componentFirst'
import componentSecond from './components/componentSecond'
export default {
  name: 'App',
  components: {
    componentFirst,
    componentSecond
  },
  computed: {
    count_value () {
      return this.$store.state.count
    }
  },
  methods: {
    increase_method () {
      this.$store.commit('countIncrease')
    }
  }
}
</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>

componentFirst

<template>
  <div class="hello">
    <h1>In subcomponent 1 count value{{count_value}}</h1>
  </div>
</template>
 
<script>
export default {
  name: 'componentFirst',
  computed: {
    count_value () {
      return this.$store.state.count
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1{
  font-weight: normal;
}
</style>

componentSecond

<template>
  <div class="hello">
    <h1>In sub assembly 2 count value{{count_value}}</h1>
  </div>
</template>
 
<script>
export default {
  name: 'componentSecond',
  computed: {
    count_value () {
      return this.$store.state.count
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
  font-weight: normal;
}
</style>

Achieving results

The count value is the same in all components, and changes with changes

Tags: Front-end Vue npm Webpack Attribute

Posted on Tue, 09 Jun 2020 00:27:54 -0400 by flattened