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')