1. Install vuex
$ Yarn add vuex or $ npm i vuex -S
2. Create store directory under src directory:
import Vuex from 'vuex'
Import view from 'View'
Vue.use( Vuex )
// store module 1. Definitions
// const store = new Vuex.Store( options )
const store = new Vuex.Store({
state：{
count: 0
},
actions：
/*
1. actions is an object
2. acitons which put all methods
3. The role of the method is to create action, transmission operation
increment (store objects, components sent actual parameter 1, parameter 2) {}
*/
increment ( { commit }, val ) {
console.log ( 'increment executed')
console.log('val', val )
// create action
const action = {
type: INCREMENT,
val
}
// send action
commit( action )
}
},
mutations：{
/*
* Is a target
* The method is also stored inside
* The method is the name of the type of actions to the operation of the transmission
* Accepts two parameters
* State is the data, action is sent to the actions of the action
* Mutations role is to modify the data
* Payload represents the transfer from the assembly over the load parameters
*/
[ INCREMENT ] ( state,action ) {
console.log ( 'mutations executed')
console.log( 'state',state)
console.log( 'action',action )
//change the data
state.count ++
}
},
getters: {}, // getters help view showing assembly state] is obtained in store
modules // data block is used to implement
/*
Data block:
A project is more than features or pages, such as a
home
classification
List
Detail
user
general user
member
Super Member
The bottom bar
Head Bar
Chart data
A state to manage all of this data, it will become messy, and poor maintenance, so we hope that the data block, a single management, a data module
*/
})
// 2. Export store module
export default store
3. In main.js implantation Store :
import store from './store'
new view ({
router, // injection routes in the project, so that all sub-components are used for routing attributes $ route $ router
store, // injected in the project store, so that all sub-components have a property $ Store , and for vuex communicate
render: h => h(App),
}).$mount('#app')
4. Use in the assembly:
<template>
<div> vuex - 基础 <hr/> <button @click = "add"> + </button>
<p> {{ $store.state.count }} </p>
</div>
</template>
<script>
export default {
methods: {
add () {
// perform actions in the increment method
// this. $ Store.dispatch (actions the name of the method )
this.$store.dispatch('increment',100)
}
},
created () {
console.log( this.$store )
}
}
</script>