Write in front:

This article is a very simple demo of using Vuex in vuE-CLI, with a brief introduction to vuex. Friends in need can make a reference, like you can point bozan, or pay attention to it, I hope to help you.

This post was originally posted on my blog:obkoro1.com

The introduction of step

I created a new vue-CLI with nothing in it, just reference vuex, here is the code cloud address, you can download it, then try NPM install, NPM run dev, inside the vuex use place also all comments again.

The installation

    npm install vuex --save
Copy the code

Create folder vuex in the SRC directory

This folder contains the above files, once created, let’s talk about what’s inside each file.

vuex/index.js

import Vue from 'vue'; import Vuex from 'vuex'; import status from './modules/status/index'; Vue.use(Vuex); Export default new vuex.store ({modules: {//Vuex allows us to split Store into modules. // use 'dataStatus'},});Copy the code

This is the main file store of vuex. In this example, we divided state, mutation, and Action into modules, and then referenced each module into the index.js file. After the files in the whole folder were built, we also imported the files into main.js.

vuex/modules/status/index.js

import actions from './actions'; import mutations from './mutations'; Open mutations export default {state:{open mutations export default {state:{open mutations export default {state:{MSG :' default ',}, actions, mutations: mutations, }Copy the code

This is the main file in a module with its own state, actions, mutions, and partitions from top to bottom.

vuex/modules/status/mutation_type.js

Export const VUEX_TEST = 'VUEX_TEST'; export const VUEX_TEST = 'VUEX_TEST'; // We usually use uppercase to name variables, because we do the same for larger variablesCopy the code

vuex/modules/status/actions.js

import * as types from './mutation_type'; // Export default {actionFn({commit},data){//actionFn is a function name triggered by the component via dispatch, which can be interpreted as a connection between the component and actions commit(types.VUEX_TEST,data); VUEX_TEST is the function of the variable where the mutation is to be committed //data is the argument passed in}};Copy the code

vuex/modules/status/mutations.js

import * as types from './mutation_type'; [types.vuex_test](state,data){export default {// types.vuex_test specifies which actions to commit. If (data.status==1){if(data.status==1){if(data.status==1){ Stat.msg =data.text; stat.msg =data.text; }else if(data.status==2){state. } // console.log(state.mg,data,'mutation'); }};Copy the code

There are comments in these two files, which explain them quite clearly. Once you’ve created all the files, go back and see how each file is related to the other

Vuex folder, file directories and downloads

The introduction of the main. Js

The vuex folder above is just a store, but that’s not enough. We need to use it in our project. Reference to main.js, as shown in the figure.

How to use it in a component.

The use of words is like the above so use, this article is just a simple example, there are more SAO operation, and so on after we start to slowly grope.

Git address

Feel write pretty messy, if you do not understand, you can go to the code cloud to download the file, and then run a run, see more, try it should be no problem.

Vuex profile

Usually I hope you learn to use first, and then understand the mechanism behind, every time I read the blog, a large section of principle posted up, I get confused force.

Vuex is mainly used for component communication between complex projects. Simple projects do not use this complex event and state management mechanism. How to define global functions in a VUE project. Using global variables in the form of global functions can also be implemented.

Vuex implementation for: data sharing mechanism

Maintains status data through a unified data center store, notifying the data center Store when each component is updated. Stroe will then share the state, triggering updates for each component that calls it.

Vuex workflow

Take a closer look at the picture below to understand how it works.

  1. Within the VUE component, dispatch is used to trigger actions to submit modified data.
  2. The mutations are then triggered by actions commit to modify the data.
  3. Mutations receive the commit request, and automatically change the data in state (the data state in the data center) via Mutate.
  4. Finally, the Store triggers updates for each component that calls it

Note: this model flows in one direction

The latter

This is all the content of this article, I hope to help you.

Finally: if need to reprint, please put the original link and signature. Code word is not easy, thank you for your support! I write articles in line with the mentality of exchange records, write bad place, do not quarrel, but welcome to give directions. Then is the hope of watching the friends point a like, can also pay attention to me. Personal blog and Nuggets personal homepage

The above 2017.12.9