Vue—组件传值及vuex的使用

时间 2019-11-08

标签 vue 组件 vuex 使用繁體版

原文原文链接

1、父子组件之间的传值

1.父组件向子组件传值：

子组件在props中建立一个属性，用以接收父组件传来的值
父组件中注册子组件
在子组件标签中添加子组件props中建立的属性
把须要传给子组件的值赋给该属性

在子组件中建立props，而后建立一个名为 ‘img-src’ 的数据名html

//子组件BigImg.vue
<template>
  <!-- 过渡动画 -->
  <transition name="fade">
    <div class="img-view" @click="bigImg">
      <!-- 遮罩层 -->
      <div class="img-layer"></div>
      <div class="img">
        <img :src="img-src">
      </div>
    </div>
  </transition>
</template>
<script>
  export default {
    props: ['img-src'],
    methods: {
     
    }
  }
</script>

在父组件中注册子组件，并在template中加入子组件标签，标签中添加img-src属性并赋值vue

<template>
  <div class="">
    <v-head></v-head>
    <big-img v-if="showImg" :img-src="imgSrc"></big-img>
</template>

<script>
  import vHead from '../components/Header'
  import BigImg from '../components/BigImg'
  export default {
    name: 'Home',
    components: {
      vHead,BigImg
    },
    data() {
      return {
        showImg:false,
        imgSrc: ''
      }
    }
</script>

2.子组件向父组件传值

子组件中须要以某种方式例如点击事件的方法来触发一个自定义事件
将须要传的值做为$emit的第二个参数，该值将做为实参传给响应自定义事件的方法
在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

在子组件中建立一个按钮，给按钮绑定一个点击事件ios

在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数vuex

// 发送事件
this.$emit('clickit')

在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法npm

<big-img @clickit="viewImg"></big-img>

clickImg(e) {
    this.showImg = true;
    // 获取当前图片地址
    console.log(e);
    this.imgSrc = e.currentTarget.src;
}

在通讯中，不管是子组件向父组件传值仍是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通讯就好理解了

http://www.javashuo.com/article/p-xhqyxikg-ee.htmlaxios

2、经过路由带参数传值

两个组件 A和B,A组件经过query把orderId传递给B组件（触发事件能够是点击事件、钩子函数等）api

this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B

在B组件中获取A组件传递过来的参数、缓存

this.$route.query.orderId

3、安装、使用 vuex

安装vuexapp

npm install vuex --save

1.在src目录下新建store文件夹并在该文件夹下新建index.js文件。在 store/index.js写入：异步

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  strict:true,  // 开启严格模式  确保state 中的数据只能 mutations 修改
  state:{
    count:0
  }
})

export default store;

在main.js中引入：

import store from './store'

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

此时能够在组件中使用 this.$store.state.count 获取store中state的值。如：

// 在组件的computed中使用
  computed:{
     count(){
      return this.$store.state.count;
     }
  }

<template>
  <div class="hello">
    <h2>{{count}}</h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  computed:{
     count(){
       return this.$store.state.count;
     }
  }
}
</script>

不少时候我们要对state里的值进行操做，在vuex提供了一个方法mutations

mutations用法(使用mutations能够修改state的值)

在store/index.js中写入：

//
...
  state:{
    count:0
  },
  mutations:{ // 更改数据的方法
    add(state){
      state.count++
    },
    //提交载荷用法
//     add(state,n){  
//      state.count += n
//    },
    sub(state){
      state.count--
    }
  }
...
//

在组件中使用mutations中对应的方法

<template>
  <div class="hello">
    <button @click="add">+</button>
    <h2>{{count}}</h2>
    <button @click="sub">-</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  computed:{
     count(){
       return this.$store.state.count;
     }
  },
    methods:{
    add(){
      this.$store.commit('add');
    },
    
    //提交载荷用法
   // add(){  
   //    this.$store.commit('add',10);
   // },
   
   //对象风格的提交方式
   //   store.commit({
   //     type: 'add',
   //     n: 10
   //     })
   
    sub(){
      this.$store.commit('sub');
    }
  }
}
</script>

此时就能够对count进行修改了。

补充1：mutation接收单个参数和多个参数

利用$store.commit 里面写参数至关于 mutation的函数名字

在组件里面：
    第一种方式： this.$store.commit("addIncrement",{name:'stark',age:18,n:5})
    第二种方式：
    this.$store.commit({
        type:"addIncrement",
        n:5,
        age:18,
        name:'stark.wang'
    })

在vuex里面接收：接收第二个参数至关于前面传过来的参数，若是多个这个就是对象，若是是一个参数，这个第二个参数payload就是前面的参数，例如

let store = new Vuex.Store({
    state: {
        num: 100
    },
    mutations: {
        // 任什么时候候改变state的状态都经过提交 mutation 来改变
        // 里面能够定义多个函数，当触发这个函数就会改变state状态
        addIncrement(state, stark) {
            console.log(stark);
            // 接收一个state做为参数， 至关于上面的state
             // 在vuex里面接收：接收第二个参数至关于前面传过来的参数，若是多个这个就是对象，若是是一个参数，这个第二个参数payload就是前面的参数。
            // mutations设计原则是同步的
            //state.num += stark;
            state.num += stark.n;
        

        },
        minIncrement(state) {
            state.num -= 5;
        }
    }

})

补充2：遇到在组件input中直接修改state中数据的问题

在组件中写入

<div class="form-control amis-control">
　　<input name="name" placeholder="" type="text" autocomplete="off" :value="activeFormData.title" @input="updataMessage($event,'t1.title')">
</div>

<script>
...
computed:{
　　activeFormData(){
　　　　return this.$store.state.formData.t1
　　}
},
methods:{
　　updataMessage(e,dataposition){
　　　　let newposition = dataposition.split('.);
　　　　this.$store.commit('updataMessage',{newval:e.target.value,curposition:newposition})
　　}
}
</script>

在store.js中写入

mutations:{
  ...
　　updataMessage(state, stark) {
      if (stark.curposition.length == 2) {
        state.formData[stark.curposition[0]][stark.curposition[1]] = stark.newval
      } else if (stark.curposition.length == 3) {
        state.formData[stark.curposition[0]][stark.curposition[1]][stark.curposition[2]] = stark.newval
      }

    },  
}

当你想异步操做的时候，因为mutation必须是同步的这一点，此时不能采用mutation对state 进行修改。action派上用场了，action就是一个函数集合，在里面怎么操做均可以，只要最后触发mutation 就能够了。

注解mutation不能异步操做的缘由：

 mutations: {
   add (state) {
     api.callAsyncMethod(() => {
    state.count++
   })
  }
}

如今想象，咱们正在 debug 一个 app 而且观察 devtool 中的 mutation 日志。每一条 mutation 被记录，devtools 都须要捕捉到前一状态和后一状态的快照。然而，在上面的例子中 mutation 中的异步函数中的回调让这不可能完成：由于当 mutation 触发的时候，回调函数尚未被调用，devtools 不知道何时回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。

Action 用法

在store/index.js中写入

mutations:{ // 更改数据的方法
    add(state){
      state.count++
    },
    sub(state){
      state.count--
    }
  },
++++
  actions:{
    addAction(context){  // context 与 store 实例具备相同方法和属性（但不是store 实例）
      setTimeout(()=>{
        context.commit('add');
      },1000)
    }
  }
++++

组件中使用getters里对应的方法：

<template>
  <div class="hello">
    <button @click="add">+</button>
    ++++
    <button @click="add_action">action +</button>
    ++++
    <h2>{{count}}</h2>
    <button @click="sub">-</button>
    <div>
      test: {{doneTodos[0].text}} <br>
      length: {{doneTodosLength}}
    </div>
  </div>
</template>
export default {
  methods:{
    add(){
      this.$store.commit('add');
      // console.log(this);
    },
    sub(){
      this.$store.commit('sub');
    },
    ++++
    add_action(){
      this.$store.dispatch('addAction');
    }
    ++++
  }
}

实际异步操做

组件methods中：

在store/index.js中引入axios :

import axios from 'axios'

看到这里有没有想过当咱们使用state中某一个数据时，咱们只想用该数据中符合条件的数据。好比：

state:{
    count:0,
    todos: [
      { id: 1, text: 'text1--true', done: true },
      { id: 2, text: 'text2--false', done: false }
    ]
  }

此时咱们只想获取state.todos中done为true的数据时咱们应该怎么获取？
可能会有如下两种方案:
1.每一个在组件中首先获取todos,而后使用filter方法过滤；
2.写一个公共函数在每一个组件中调用如下；
若是用到todos中done为true的组件不少，这两种方法都是很不理想的。Vuex为此为咱们引入了一个方法Getter。

Getter 用法

官方解释：Vuex 容许咱们在 store 中定义“getter”（能够认为是 store 的计算属性）。就像计算属性同样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被从新计算。

在store\index.js写入：

mutations:{ // 更改数据的方法
    add(state){
      state.count++
    },
    sub(state){
      state.count--
    }
  },
  +++
  getters:{  // 用法相似组件中的 computed, 能够认为是store的计算属性
    doneTodos:state => { // Getter 接受 state 做为其第一个参数：
      return state.todos.filter(todo => todo.done)  // -> [{ id: 1, text: 'text1--true', done: true }]
    },
    // Getter 也能够接受其余 getter 做为第二个参数
    doneTodosLength:(state,getters) => {
      return getters.doneTodos.length // -> 1
    },
  +++
  }

在组件中使用getter对应的方法：

<template>
  <div class="hello">

    <button @click="add">+</button>
    <h2>{{count}}</h2>
    <button @click="sub">-</button>

+++
    <div>
      test: {{doneTodos[0].text}} <br>
      length: {{doneTodosLength}}
    </div>
+++    
  </div>
</template>
<script>
export default {
  //...
    computed:{
    +++
        doneTodos(){
          return this.$store.getters.doneTodos // -> [{ id: 1, text: 'text1--true', done: true }]
        },
        doneTodosLength(){
          return this.$store.getters.doneTodosLength // -> 1
        }
    +++
  }
}
</script>

做者：朴树-连接：https://juejin.im/post/5bf7c4375188254b9d0935c9来源：掘金著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。