vuex 基本用法、兄弟组件通信，参数传递

vuex主要是是做数据交互，父子组件传值可以很容易办到，但是兄弟组件间传值，需要先将值传给父组件，再传给子组件，异常麻烦。

vuex大概思路：a=new Vue()，发射数据‘msg’：a.$emit('evt','msg')，接收数据msg：a.$on('evt',msg=>this.msg=msg) ，代码在mounted中。

vuex使用：

store端 ：

一共有4大块，state,actions，mutations、getters

//一般单独js文件写数据   import Vue from 'vue'  import Vuex from 'vuex' Vue.use(Vuex)   export default new Vuex.Store({ state: {　　　　　　　　　　　　　　　　//state数据跟根组件data写法一模一样。也是储存数据的。 　　a: 1, 　　b: '33' }, actions: {　　　　　　　　　　　　　　　//actions里面全是方法，与mutations区别只有这儿的方法可以使用异步操作，mutations方法使用异步，调试会混乱。 　　fn({ commit, state }, n) {　　　　//{{commit,state}}写法是es6语法，简写，state是默认传参，就是上面的state，就算写aaa也是指向state。n为组件传过来的参数。　　 　　　　　　new Promise((resolve, reject) => {　　　　　　　　//这儿模拟延迟，不模拟写 state.a += n;commit('add')代替 　　　　　　setTimeout(() => resolve(state.a += n), 1000) 　　　　}).then(commit('add'))　　　　　　//fn执行结束后，再执行mutations 中的add(){}。必须如此，否则，组件使用时收不到数据。 　　}, 　　msgFn({ commit, state }, msg) { 　　　　state.b = msg 　　　　commit('add') 　　} }, mutations: {　　　　　　　　　　　　　　//此处的function是同步操作的。其他的都跟上面一样。 　　add(state,n) {}　　　　　　　　　　//参数跟actions一样。 }, getters: {　　　　　　　　　　　　　　//　这个跟组件的computed差不多，接收state作为参数，不接受组件传参数。需要return值。 　　c(state) { 　　　　state.a += 1　　　　　　　　 　　　　return state.a--　　　　　　　 　　}， } })  

组件端使用：

使用的时候后，可以直接挂载后使用，挂载后就变成了自己组件的数据或者方法了。：

挂载点：computed:

　　　　mapState(['a'])             　　　　　　　　　　　　　　　　或者使用：this.$store.state 　　获取state对象。
　　　　mapGetters([ 'doneTodosCount', 'anotherGetter',])    　　或者使用:this.$store.getters　　获取getters对象。
挂载点：methods:
　　　　mapMutations(['mutationName']) 　　

　　　　mapActions([ 'actionName',]) 　

　　　　　　Mutations使用：

　　　　　　　　使用方法1:无需挂载，直接使用，可在自定义methods，watch，等等函数中使用。

　　　　　　　　　　　　 this.$store.commit('mutationName',n)  　　使用mutiationName函数并传递参数n，传过去自动变为是第二位参数，第一位参数一定是state。

　　　　　　　　使用方法2：需挂载

　　　　　　　　　　　　@click='mutationName(5)', 这个5 传过去会自动变成为给函数第二个参数，第一个参数必须是state。

　　　　　　Actions使用：

　　　　　　　　使用方法一：无需挂载，直接使用。

　　　　　　　　　　this.$store.dispatch('actionA'，msg).then(() => {}) 传参上同。这儿可以用then（）

　　　　　　　　使用方法2：需挂载

　　　　　　　　　　@click='actionA(msg).then(fn)'　　使用actionA函数，并且传msg参数过去。参数上同　　

<template>
<div id="app">
<button @click='fn(4)'>state.a+4</button>  <!--使用vuex传过来的函数fn，并且传参4-->
<div>
现在state.a：{{a}}
<br>
现在getters.c(): {{c}}　　　注：c=state.a+１
<br>
<hr>
<aaa ></aaa>
<hr>
<bbb></bbb>
</div>
</div>
</template>

<script>
import {mapGetters,mapActions,mapMutations,mapState} from 'vuex';　　　　//引入辅助函数，拿去挂载后就可以用了。
const {fn,msgFn}=mapActions(['fn','msgFn'])　　　　　　　　　　　　　　　　　　//对象展开运算符...测试无法用，这儿用解构代替。　　　　　　　　
const {a,b}=mapState(['a','b'])　　　　　　　　　//解构目的在于：挂载方式如 methods：MapActions(['xxx'])，自己还想在本地写方法，怎么办？
const {c}=mapGetters(['c'])　　　　　　　　　　　　//于是将外面的花括号去掉，添加到methods：{fn，msgFn，myFn}中，其中myFn为本地添加的。
export default {
computed:{
a,b,c
},
methods:{
fn,
},
components:{
aaa:{　　　　　　　　　　　　　　//传递input输入的msg給state.b ，调用vuex里的msgFn,将msg当做参数传过去，msgFn的代码就是将state.b=msg。
template:`<div><h2>我是子组件aaa</h2><p >{{c}}</p><br>state.b=input值 :<input type="text" v-model='msg'></div>`,
computed:mapGetters(['c']),
data(){
return {
msg:''
}
},
methods:{
fn,
msgFn,
　　　　　fn1(){
　　　　　　　console.log(222)
　　　　　}
}
},

　　　　watch:{ 　　　　　　msg(){　　//检测msg的值，发生变化后触发msgFn 　　　　　　this.$store.dispatch('msgFn',this.msg).then(this.fn1) 　　　　　　} 　　　　}

bbb:{　　　　　　　　　　　　//兄弟组件能够显示state.b的值。
template:`<div><h2>我是子组件的兄弟组件bbb</h2><br>我收到aaa的输入数据，利用state.b显示出来 :</bbbbr><span>{{b}}</span></div>`,
computed:mapState(['b'])
}
}
}

main.js中，需要将vuex.store实例挂载到根组件中。

import Vue from 'vue'
import App from './App.vue'
import store from './store.js'

new Vue({
store,
el: '#app',
render: h => h(App)
})