vuex学习心得

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

转载于:https://www.cnblogs.com/tutao1995/p/10396993.html