1.npm install vuex --save （生产环境会用到，因为--save）
2.在src目录下建立store文件夹以及index.js文件。
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
showFooter:true,
changableNum:0
}
//监听 state实时变化
const getters = {
isShow(state){
return state.showFooter
},
getChangedNub(state){
return state.changableNum
}
}
//改变修改state初始值的方法
const mutations = {
footer(state){
state.showFooter = state.showFooter?false:true
},
add(state,num){
state.changableNum += num
},
reduce(state,num){
state.changableNum -= num
}
}
//异步触发mutations里面的方法
const actions = {
handleFooter(context){
context.commit('footer')
},
getAddNum(context,num){
context.commit('add',num)
},
getReduceNum(context,num){
context.commit('reduce',num)
}
}
const store = new Vuex.Store({
state,getters,mutations,actions
});
export default store;
3.main.js 引入store
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
4.在引用位置调用方法
<template>
<div>
<h2>
{{$store.state.changableNum}}
</h2>
<hr/>
<h3>
<button @click="$store.commit('reduce',6)">-</button>
<button @click="$store.commit('add',6)">+</button>
</h3>
<transition name="slide-fade" mode="out-in">
<div v-if="$store.state.showFooter">表格</div>
<!-- <div v-else>地图</div> -->
</transition>
<h3>
<button @click="$store.dispatch('handleFooter')">切换视图</button>
<!-- <button @click="$store.dispatch('hideFooter')">hide</button> -->
</h3>
<div>
<!-- <button @click="$store.commit('reduce')">-</button>
<button @click="$store.commit('add')">+</button> -->
</div>
</div>
</template>
<script>
import store from '@/store/index'
// import {mapState} from 'vuex';
export default{
data(){
return{
msg:'Hello Vuex',
}
},
// computed:mapState(["count"]),
// store
}
</script>
<style>
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
</style>
总体步骤：1.npm 2.创建 3.引用 4.调用