001_Vue核心插件_vuex(h3)
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 \src\main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store/index'
Vue. config. productionTip = false
new Vue ( {
store,
render: h => h ( App)
} ) . $mount ( '#app' )
< template>
< div id= "app" > < m- parent> < / m- parent> < / div>
< / template>
< style> < / style>
< script>
import MParent from './views/Home'
export default {
data ( ) {
return { }
} ,
components: {
MParent
} ,
methods: { }
}
< / script>
< template>
< div>
< button @click= "add_dl" > 增加< / button>
< h5>
vuex < span style= "color: red" > { { count_dl } } < / span>
< h5>
getters < span style= "color: red" > { { doubleCount } } < / span>
< / h5>
< / h5>
< / div>
< / template>
< script>
import { mapState, mapGetters } from 'vuex'
export default {
computed: {
... mapState ( {
count_dl: state => state. text. count
} ) ,
... mapGetters ( [ 'doubleCount' ] )
} ,
methods: {
add_dl ( ) {
this . $store. commit ( 'add' )
}
}
}
< / script>
< style lang= "scss" scoped> < / style>
import Vue from 'vue'
import Vuex from 'vuex'
import text from './text'
Vue. use ( Vuex)
export default new Vuex. Store ( {
modules: {
text
}
} )
export default {
state: {
count: 0 ,
} ,
getters: {
doubleCount ( state) {
return state. count * 2
}
} ,
mutations: {
add ( state) {
state. count ++
} ,
decrease ( state) {
state. count --
}
} ,
actions: {
delayAdd ( context) {
setTimeout ( ( ) => {
context. commit ( 'add' )
} , 1000 ) ;
}
}
}