Detailed explanation of the steps for getting started with vuex

This time I will bring you a detailed explanation of the steps for getting started with vuex. What are the precautions for getting started with vuex? The following is a practical case, let’s take a look.

Preface

In the previous projects, we have more or less encountered some places where communication between components is required, but for various reasons,## The cost of #event bus is higher than that of vuex, so I chose vuex for technical selection. But I don’t know why, some newcomers in the

team started to shrink back when they heard about vuex, because vuex is difficult? Really? Is it difficult?
Today we use 3 simple steps to prove how simple vuex is.

This is purely personal experience, and there are bound to be inaccuracies. If you find any, please correct me. !

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

Step 0

Create a new vue project, 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. The location of the name is arbitrary. According to convention, it is recommended to be in the /src/store directory (if not, create a new 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 It's a little bit more, but does it look familiar? It's not much different from ordinary vue.

This step is actually to create a new store, but we haven't used it in the project yet.

Second step

Introduce the above file in the

entry file

, and slightly change the parameters passed to new Vue(). There are remarks after the new lines. File location/src/main.js (vue-cli automatically generates the entry, if you can do 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: '<App/>'
})

Tip: The address after import store from './store' is the location of the file we created above (/src/store/index.js).

Because this is index.js, I can omit it.

The third step

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

file location/src/main .js (it is 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 './components/HelloWorld'
export default {
 computed:{
 getName(){
  return this.$store.state.name
 }
 },
 methods:{
 changeName () {
  this.$store.commit('updateName')
 }
 }
}
</script>

This is a very ordinary vue file. The difference is that here we need Use the computed 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 the above example? Why not just use vue’s data and methods?

The above example is just for simplicity 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-subcomponents inside sub-components, and there are sub-sub-components below them. There are sub-sub-sub-components, 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 use this.$store in the lowest layer component. commit(),

Then use the computed attribute on the outermost component to get the corresponding value, and you can update it in real time. There is no need to go through $emit layers.

I believe I read the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use v-model and promise to implement the vue pop-up component

How to use Vue secondary encapsulation axios plug-in

The above is the detailed content of Detailed explanation of the steps for getting started with vuex. For more information, please follow other related articles on the PHP Chinese website!