vuex

今天,將之前用的博客上面的內容全部整理到現在的博客上面,希望看到的大家多多支持

人人皆知react有redux，vue也就出現了vuex。

· 為什么要用vuex？

   舉個例子：父子組件之間的傳值，父組件可以直接通過props向子組件傳值，子組件不能直接通過俢改props，更改state向父組件傳值，此時vuex出現了。

· vuex

   話不多說，上代碼

 

//父組件

<template>

<div>

<a href='javascript:;' @click = '$store.state.show'>點我</a>

<a-digstore></a-digstore>//子組件

</div>

</template>

<script>

import digstore from './components/dignore;

export default{

component:{

'a-dignore':digstore

}

}

</script>

//vuex 在src文件夾中 新建一個文件夾 store->index.js

import vue from 'vue'

import vuex from 'vuex'

vue.use(vuex);

export default new vuex.Store({

state:({

show:true

})

})

//相應的在mian.js里面就要將store分離出去

import vue from 'vue';

import store from './stroe';

new Vue({

el:'#app',

store,

router,

template:'<App/>',

component:{App}

}

//這樣就將store分發出去了，所有的組件都能調用$store.state.show.

 

 vuex->modules 組件多了狀態也就多了，所有的狀態全都存放在一個store中，不易與后期管理，所以vuex提供了modules。

//vuex 在src文件夾中 新建一個文件夾 store->index.js

import vue from 'vue'

import vuex from 'vuex'

vue.use(vuex);

import adignore from './components/adignore';

import dtgonre from './components/dtgnore';

export default new vuex.Store({

modules:{

dignore:adignore,

dtg:dtgonre

}

})

components->adignore.js

export default{

show:true

}

components->dtgonre.js

export default{

show.false

}

//組件調用

$store.state.dignore.show

//前面的方法我們對vuex的依賴僅僅只有$store.state.dignore.show,如果我們想有多個狀態依賴，就要用到mutations

mutations

export default{

state:{

show:true;

},

mutations:{

switch_dialog(state)｛/監控的上面的state，

state.show = state.show?true:false;

}

}

這里需要注意的是:

1. de >mutationsde> 中的方法是不分組件的 , 假如你在 dialog_stroe.js 文件中的定義了
   de >switch_dialogde> 方法 , 在其他文件中的一個 de >switch_dialogde> 方法 , 那么
   de >$store.commit('switch_dialog')de> 會執行所有的 de >switch_dialogde> 方法。
2. de >mutationsde>里的操作必須是同步的。

你一定好奇 , 如果在 de >mutationsde> 里執行異步操作會發生什么事情 , 實際上並不會發生什么奇怪的事情 , 只是官方推薦 , 不要在 de >mutationssde> 里執行異步操作而已。

組件調用：$store.commit('switch_dialog')

<a href = 'javascript:;' @click = "$store.commit('switch_dialog')">點我</a>

actions

export default{

state:{

show:true

},

mutations:{

de  >        switch_dialog(state){//這里的state對應着上面這個state
            state.show = state.show?false:true;
            //你還可以在這里執行其他的操作改變state
        }
    },
    actions:{
        switch_dialog(context){//這里的context和我們使用的$store擁有相同的對象和方法
            context.commit('switch_dialog');
            //你還可以在這里觸發其他的mutations方法
        },
    }de>

}

//組件調用：$store.dispatch('switch_dialog')