An introduction to vuex

Let everyone get started with VUEX quickly in three simple steps. This article also introduces the most basic functions of VUEX and related knowledge points. If you are interested, learn it.

Preface

In the previous projects, we have more or less encountered some places where communication between components is required, and due to various reasons ,
The cost of event bus is higher than vuex, so vuex was chosen for technical selection, but for some reason, some newcomers in the
team started to shrink back when they heard about vuex, because vuex is difficult ? Is it really difficult?
Today we use 3 simple steps to prove how simple vuex is.

This is purely personal experience, and there are inevitably inaccuracies. If found, , welcome corrections!

This is an entry-level tutorial, entry-level tutorial, entry-level tutorial for novices

Step Zero

Create a new vue project and install vuex. I won’t introduce too much here. If you can click in, you will have these skills by default ^_^

First step

Create a new .js file with any name and location. According to convention, it is recommended to be in the /src/store directory (if not, create one yourself)

File location/src/store/index.js

// 引入vue 和 vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 这里需要use一下,固定写法,记住即可
Vue.use(Vuex)

// 直接导出 一个 Store 的实例
export default new Vuex.Store({
 // 类似 vue 的 data
 state: {
 name: 'oldName'
 },
 // 类似 vue 里的 mothods(同步方法)
 mutations: {
 updateName (state) {
  state.name = 'newName'
 }
 }
})

The code looks a little bit complicated, but does it look familiar? It’s not much different from ordinary vue.

This step is actually to create a new store, but we have not used it in the project yet.

The second step

Introduce the above file into the entry file , and slightly change the parameters passed to new Vue(). There is a note after the new line

File location/src/main.js (vue-cli automatically generates the entry, if you can do it without scaffolding, Then there is no need for me to explain)

import Vue from 'vue'
import App from './App'
import vuexStore from './store' // 新增

new Vue({
 el: '#app',
 store:vuexStore     // 新增
 components: { App },
 template: &#39;<App/>&#39;
})

Tip: import store from './store' The address behind is the one we created above The location of the file (/src/store/index.js),
Because this is index.js, it can be omitted.

The third step

The above 2 steps have actually completed the basic configuration of vuex. The next step is to use the

file location/src/main.js (also app.vue generated by vue-cli, For the convenience of demonstration, I have removed the redundant code)

<template>
 <p>
 {{getName}}
 <button @click="changeName" value="更名">更名</button>
 </p>
</template>

<script>
import HelloWorld from &#39;./components/HelloWorld&#39;

export default {
 computed:{
 getName(){
  return this.$store.state.name
 }
 },
 methods:{
 changeName () {
  this.$store.commit(&#39;updateName&#39;)
 }
 }
}
</script>

This is a very ordinary vue file. The difference is that we need to use computed here Attribute to get the "data" in the store

And if we want to change the data, we no longer use this.xxx = xxx and change it to this.$store.commit('updateName')

Summary

You may think, what is the significance of doing this in the above example? Why not just use vue’s data and methods?

The above example is just for Briefly explain how to use vuex, so some processes are simplified. Just imagine if you have a page like this:

has a total of 10 layers of components nested (that is, there are sub-sub-components inside sub-components, sub-components There are also sub-sub-sub-components under the sub-component, and so on for 10 layers)

Then when the data of the last layer component changes, when we want to notify the first layer component, we only need to In the component, use this.$store.commit(),

and then use the computed attribute on the outermost component to get the corresponding value, so that it can be updated in real time. There is no need to go through $emit layers.

Finally

I originally wanted to expand on getter, action dispatch, modularization, etc. at the end, but in order to be worthy of this title.

VUEX Advanced Knowledge Points Consolidation

The above is the entire content of this article. I hope it will be helpful to everyone's learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to the usage of v-bind in VUE

How to unify the vue coding style in vscode introduce

The above is the detailed content of An introduction to vuex. For more information, please follow other related articles on the PHP Chinese website!