【前端笔记】vue父子组件通信和vuex的使用

父子组件通信

父组件向数据

先创建Home.vue和HelloWorld.vue:

<template>
  <div class="home">
    <h2>{{count}}</h2>
    <button @click="count++">+</button>f
    <button @click="count--">-</button>
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'Home',
  data () {
    return {
      count: 0
    }
  },
  components: {
    // eslint-disable-next-line no-unused-expressions
    HelloWorld
  }

}
</script>

其中引入的语句:
import HelloWorld from ‘@/components/HelloWorld.vue’
components: {
// eslint-disable-next-line no-unused-expressions
HelloWorld
}
< HelloWorld />(这句话加上以后会显示HelloWorld中的内容）
HelloWorld:

<template>
  <div class="hello">
    <h1>i am hello wordlsg</h1>

  </div>
</template>

<script>

export default {
  name: 'HelloWorld',

  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

效果：

父组件向子组件传变量：
父组件：

    <HelloWorld :count="count"/>
      <h2>hhhh</h2>

子组件:

<div class="hello">
    <h1>子组件 hello word</h1>
{{count}}
  </div>
   props: {

    count: Number
  }

可以看到：

vuex的使用

在store下的js文件:

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    num: 0
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

Home组件:

   <h2>使用全局的状态</h2>
    <h2>{{$store.state.num}}</h2>

使用mutation和getter中的计算属性：

mutation:
组件中:

methods: {
    subb () {
      this.$store.commit('sub')
    }
  }

index.js中:

mutations: {
    sub (state) {
      state.num--
    }
  },

在home中使用:

<h2>使用getter:{{$store.getters.power}}</h2>

store下面的index.js:

getters:{
power(state){
return state.num*state.num;}
}
//这个state参数是默认的，实际使用并不需要加参数

现在home组件的内容:

<template>
  <div class="home">
    <h2>{{count}}</h2>
    <button @click="$store.state.num++">+</button>f
    <button @click="subb">-</button>
    <hr>
  <h2>使用getter{{$store.getters.power}}</h2>

    <HelloWorld :count="count"/>
    <h2>使用全局的状态</h2>
    <h2>{{$store.state.num}}</h2>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'Home',
  data () {
    return {
      count: 0
    }
  },
  components: {
    // eslint-disable-next-line no-unused-expressions
    HelloWorld
  },
  methods: {
    subb () {
      this.$store.commit('sub')
    }
  }

}
</script>

注意：getters中的方法第一个参数是state（是固定的，要访问state中的数据时必须写，不然无法正常运行）使用第一个参数state可以访问数据，使用getters参数可以访问访问器中的其它访问器函数。
想复用getters中已经使用了的计算属性:
store/index.js:

 state: {
 cartlist:[
 {name:'<细说>',price:10},
  {name:'<细说>',price:20},
   {name:'<细说>',price:30},
      {name:'<细说>',price:40},]
  },
getters:
第一个参数就是state
 vxnumpow(state){
 return state.num*state.num
 / totalprice(state){
 return state. cartlist. reduce((s,n)=>s+n.price, 0);
 goodsgt(state){
 return state.cartlist.filter(n=>n.price>30);
},//过滤掉价钱小于30的商品
 totalprice(state
,getters){
 return getters. goodsgt. reduce((s,n)=>s+n.price, 0);
 },
 

getters中的方法第二个参数固定是getters，如果想加自定义参数则返回一个方法：

goodself(state,getter){
return function(price){
return state.cartlist.filter(n => n.price>price)
}}
//或者写成:
return price=>state.cartlist.filter(n => n.price>price)

在组件中使用:

<h3>{{$store.getters.goodself(30)}}</h3>

action中的方法

actions: {
    demo (context) {
      setTimeout(() => {
        context.state.num = 99
        // context.commit('sub')
      }, 3000)
    }
  },

利用mutation修改状态:利用 context.commit(‘sub’)
效果(三秒钟后变成99）：

Home.vue:

    <button @click="cnum">action</button>
    methods:{
   cnum () {
      this.$store.dispatch('demo')
    }
    }

注意action中的方法要用dispatch

多模块的使用

利用const cart = {};
const goods = {};
export default new Vuex.Store({
state:{},
modules: {cart,goods}
}
)
如果要访问goods中的name:
(组件中)

<h2>{{$store.state.user.name}}</h2>

模块会自动绑定到state中