Use of Vue-cli+webpack+router+vuex---Vuex

Have the confidence to see the official documents

There is a notable feature of Vue's official documentation---code is not fully pasted

Vue Chinese Station: cn.vuejs.org
Vue-router Official Tutorial: ROUTER.VUEJS.ORG/ZH-CN
Vuex Official Tutorial: VUEX.VUEJS.ORG/ZH-CN

I'll default to your VUE-CLI. You'll have a directory like this.

I don't have to explain it here! <*_*> if VUE-CLI is not installed, you can go to my previous blog to watch Vue Scaffolding---vue-cli

Get ready for work now.

1-0 now create store folder under SRC directory

1-1 create under the store folder

The Index.js//file will converge to this place, and the place where the store object is created, just like the entrance to the store

Actions.js//Storage Vuex core processing function

Getters.js//tool interface to facilitate the construction of a global state custom method

Mutations.js//revision of the store in various states of the place

Rootstate.js//I refer to the practice of a great God create rootstate.js save top-level data

Configuration data

2-0 Src->store->index.js

Import Vue from 'Vue'; import Vuex from 'Vuex'; Import* asActions from './actions'; Import* asMutations from './mutations'; Import* asGetters from './getters'; Import State from './rootstate'; Vue.use (Vuex)Conststore =NewVuex.store ({State, getters, actions, mutations}) exportdefaultStore

2-1 Src->main.js

Attach the store object to the Main.js

Import vue from ' Vue 'Import App from'./app 'Import Router from'./router '//import Elementui from ' Element-ui '//import ' Element-ui/lib/theme-default/index.css 'Import store from './store/index ';//Element-ui Use//vue.use (Elementui)/*eslint-disable no-new*/NewVue ({el:' #app ', router, store, Template:' <App/> ', components: {APP}})

An instance

src->components->Demo-vuex.vue

<Template>  <Div>{{name}}<Button@click= "Fun">Click Change MSG</Button>    <BR>msg: {{msg}}</Div></Template><stylescoped></style><Script>Import {mapgetters, mapactions} from'Vuex'; Exportdefault{data () {return{name:"Demo-vuex"}}, computed: {... mapgetters (['msg'])},  //correspondence with getters. MSG in Technologymethods: {... mapactions ([' Fun'])}   //corresponding actions in the fun method  }</Script>

The goal is to simply click on the button to change the MSG value

Test component src->components->Demo-vuex2.vue

<Template>    <Div>{{msg}}</Div></Template><stylescoped></style><Script>Import {mapgetters} from'Vuex'; Exportdefault{data () {return{}}, Computed:{...mapgetters (['msg'])}    }</Script>

The component in order to see if it implements a value-to-component problem between components

Routing Configuration Src->router->index.js

Import vue from ' Vue' vue-router' Components/demo-vuex' components/demo-vuex2 '   defaultnew  Router ({  routes: [    {      '/demo ',      ' demo '  ,      Component:demo    },    {            '/demo2 ', ' Demo2 ',      Component:demo2    }  ]})

Src->store->rootstate.js

Const state = {  ' I am the original data 'default state;

I used rootstate.js as the data initialization to initialize the MSG and expose the state

src->store->Actions.js

Export Const FUN = ({commit}) + {  commit ({    ' getmsg '),     //  corresponding to the Getmsg method in Mutation.js    msg: ' I am the modified data ... '  } ;

Sends the value to be modified to mutations.js---value is only allowed to be modified in Mutations.js

src->store->Mutations.js

Export Const GETMSG = (state, payload) = {  = payload.msg;}

Modify the State.msg value, payload.msg corresponds to the value passed in the Actions.js.

src->store->Getters.js

Export Const MSG = state = State.msg;

The simplest service will retrieve the value and return

Test it, right?

Run

NPM Run Dev

Browser input

Http://localhost:8080/#/demo

Look at the interface.

Data changes after clicking

Test from other components

Browser input

Http://localhost:8080/#/demo2 See if it's a changed data.

Use of Vue-cli+webpack+router+vuex---Vuex