Shulou(Shulou.com)06/03 Report--

This article introduces the knowledge of "what can vuex be used for?". In the operation of actual cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

First of all, what exactly is vuex?

Vuex is a state management model developed specifically for vue.js applications.

This state can be understood as a property in data that needs to be shared with other components.

In other words, we need to share the data, using vuex for unified and centralized management.

In vuex, there are five basic objects by default:

State: storing states (variables)

Getters: recompiling before data acquisition can be understood as the computational property of state. We use $sotre.getters.fun () in the component

Mutations: modifies the state and is synchronized. Use $store.commit ('', params) in the component. This is similar to the custom event in our component.

Actions: asynchronous operation. Used in a component is $store.dispath ('')

The sub-module of modules:store is used to develop large-scale projects and facilitate state management. We won't explain it here, it's the same as the one above.

Let's officially start using vuex step by step.

1. First create a vue-cli project

Execute the following command to create an app project (you can also use other non-webpack templates and non-app names here)

Vue init webpack app

2. After the creation is completed, we go to the folder and run the project

Cd app/ npm run dev

Next we create a vuex folder under the src directory

And create a store.js file under the vuex folder

The folder directory looks like this.

3. We haven't introduced vuex yet. We need to download vuex and introduce it first.

To ensure that we are under our project, type the following command on the command line to install vuex

Npm install vuex-save

4. After the installation is successful, we can enjoy our vuex in store.js!

In the store.js file, introduce vuex and use vuex. Notice here that my variable names are uppercase Vue and Vuex

Import Vue from 'vue' import Vuex from' vuex' Vue.use (Vuex) const state = {count: 0} export default new Vuex.Store ({state})

Next, introduce store into main.js

Import Vue from 'vue' import App from'. / App' import router from'. / router' import store from'. / vuex/store' / / introduce store Vue.config.productionTip = false / * eslint-disable no-new * / new Vue ({el:'# app', router, store, components: {App}, template:''})

However, we can use the count property we defined in any component.

Here we use it in helloWorld to remove tags that are not used in helloworld.vue

{{$store.state.count}}

Open the browser where we just ran the project, and we can see that it has been used successfully!

And in the vue development tool, we can see the variable count that we defined.

At this point, it has been a small part of the success! Vuex is easy, isn't it?

Recall that we just need to use vuex in the download installation, define the state object in our defined store.js, and expose it.

Use our store.js in main.js (this is to prevent references in various components, because there is our new Vue instance in main.js! )

Now that we have used state in vuex, how do we manipulate this value? That's right! Use mutations and actions

We continue to manipulate the store.js file

We define the mutations object in sotre.js, which has two methods, the parameters in mutations, the first of which defaults to state, and the next is the custom parameter.

We define two methods in mutations, add and subtract, and set a parameter n, the default value is 0, and then use it in Vuex.Store

/ * mutations contains our methods for manipulating state object properties * / const mutations = {mutationsAddCount (state, n = 0) {return (state.count + = n)}, mutationsReduceCount (state, n = 0) {return (state.count-= n)}} export default new Vuex.Store ({state, mutations})

And then we use this method in helloWorld.vue.

Remember how we used mutations in our components? It is very similar to custom events.

{{$store.state.count}} increase or decrease methods: {handleAddClick (n) {this.$store.commit ('mutationsAddCount',n);}, handleReduceClick (n) {this.$store.commit (' mutationsReduceCount',n);}}

Come to the browser to see how it works!

We can see that whenever an event is triggered, we can see the mutations method and parameters that we triggered in the vue development tool.

Perfect!

And then there's actions,actions, which is asynchronous.

Create an actions object and use the

Here I use two different parameters in two methods, one is context, which is a parameter that has the same object properties as the store object. In the second function, I directly used the commit method of this object.

As long as everyone likes.

Const actions = {actionsAddCount (context, n = 0) {console.log (context) return context.commit ('mutationsAddCount', n)}, actionsReduceCount ({commit}, n = 0) {return commit (' mutationsReduceCount', n)}} export default new Vuex.Store ({state, mutations, actions})

In helloWorld.vue

In methods, add two methods that use dispath to trigger

Asynchronous operations increase asynchronously and decrease handleActionsAdd (n) {this.$store.dispatch ('actionsAddCount',n)}, handleActionsReduce (n) {this.$store.dispatch (' actionsReduceCount',n)}

Go to the browser and see how it works!

And finally, getters.

We usually use getters to get our state because it is a computational property of state

Const getters = {getterCount (state, n = 0) {return (state.count + = n)} export default new Vuex.Store ({state, mutations, actions, getters}) {{count}} const getters = {getterCount (state) {return (state.count + = 10)}}

Getters is very simple.

At this point, if you understand it all, vuex, you have no pressure.

But vuex officials have given us an easier way to use vuex, that is, {mapState, mapMutations, mapActions, mapGetters}

As long as we understand the basics above, these are all fine, but we just write about them.

As simple as that, we use the extension operator of es6 here. If the students who are not familiar with it still go to see the book "introduction to Es6 Standards" written by Ruan Yifeng, I have read it and benefited a lot!

Import {mapState, mapMutations, mapActions, mapGetters} from 'vuex' export default {name:' HelloWorld', data () {return {msg: 'Welcome to Your Vue.js App'}}, methods: {... mapMutations ({handleAddClick:' mutationsAddCount', handleReduceClick: 'mutationsReduceCount'}),... mapActions ({handleActionsAdd:' actionsAddCount', handleActionsReduce: 'actionsReduceCount'}) / / handleAddClick (n) {/ / this.$store.commit (' mutationsAddCount',n) / / handleReduceClick (n) {/ / this.$store.commit ('mutationsReduceCount',n); / /}, / / handleActionsAdd (n) {/ / this.$store.dispatch (' actionsAddCount',n) / /}, / / handleActionsReduce (n) {/ / this.$store.dispatch ('actionsReduceCount',n) / /}}, computed: {count () {return this.$store.getters.getterCount}

Similarly, getters and state can also use mapState,mapGetters

If you are lazier, we can use arrays instead of objects, or object shorthand in es6

Like this.

This is the end of what vuex can be used for. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.