imp 位置 turn button dispatch def hid () route

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.調用

vuex學習心得