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

时间:2024-01-16 10:44:38

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+1
<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)
})