Getting started with Vuex in Vue. js practice, vue. jsvuex

Getting started with Vuex in Vue. js practice, vue. jsvuex

Preface

In a Vue. js project, if the project structure is simple, you can use props or $ emit to transmit data between parent and child components. Click this article to view details.

However, for large projects, data must be transferred between sub-components in most cases, which is not convenient in the previous method. The status management tool Vuex of Vue perfectly solves this problem.

1. Install and introduce Vuex

Project Structure:

First install Vuex with npm

cnpm install vuex -S

Then introduce

import Vue from 'vue'import App from './App'import Vuex from 'vuex'import store from './vuex/store'Vue.use(Vuex)/* eslint-disable no-new */new Vue({ el: '#app', store, render: h => h(App)})

2. Build the core repository store. js

The state of the Vuex application should be stored in store. js. The Vue component can obtain the state from store. js, and can understand store as a repository of global variables.

However, there are some differences with simple global variables, mainly because when the status in the store changes, the corresponding vue components will also be updated efficiently.

Create a vuex directory under the src directory and put store. js under the vuex directory

Import Vue from 'vue 'import Vuex from 'vuex' vue. use (Vuex) const store = new Vuex. store ({// state defined: {author: 'wise Wrong '}) export default store

This is the simplest store. js with only one status author in it

Although Vue and Vuex have been introduced in main. js, we have to introduce them again here.

3. Map the status to the component

<Template> <footer class = "footer"> <ul> <li v-for = "lis in ul"> {lis. li }}</li> </ul> <p> Copyright©{Author }}- 2016 All rights reserved </p> </footer> </template> <script> export default {name: 'footerdiv ', data () {return {ul: [{li: 'golden glass '}, {li: 'Misty sample'}, {li: 'zookeeper of use'}, {li: 'Happy fire'}, {li: 'bright shares'}] }}, computed: {author () {return this. $ store. state. author }}</script>

This is the html and script part of footer. vue.

In computed this.$store.state.author To the author in html.

After page rendering, you can get the author value.

4. modify the status in the component

Add an input box in header. vue and pass the value of the input box to author in store. js.

Here I use Element-UI as the style framework

Bind the input value of the input box to inputTxt, bind the click event to the button next to it, and trigger the setAuthor method.

methods: {　setAuthor: function () {　　　this.$store.state.author = this.inpuTxt　}}

In the setAuthor method, the inputTxt value in the input box is assigned to the status author in Vuex to implement data transmission between child components.

5. officially recommended methods for modifying the status

In the preceding example, setAuthor directly uses the value assignment method to modify the status author. However, vue officially recommends the following method:

First, define a method newAuthor in store. js. The first parameter state is $ store. state, and the second parameter msg needs to be passed in separately.

Modify the setAuthor method in header. vue.

Used here $store.commitSubmit newAuthor andthis.inputTxt Send it to msg to modify author

Submit explicitly in this way(commit) mutationsSo that we can better track every state change, so we recommend using the second method in large projects.

Summary

The above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, please leave a message, thank you for your support.