使用VueX实现组件传值

使用VueX实现组件传值

1、什么是Vuex

vuex是专门帮助所有组件维护共享数据的公共区域，只要一个数据，有可能被多个组件使用，都可以通过vuex来管理。

2、获取仓库数据，在页面上显示

1、创建脚手架时，选择vuex选项，一起安装
在脚手架项目src文件夹中存在store文件夹以及index.js文件
2、在store文件夹中，创建数据

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    name:"帅"
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

3、在页面中调用state中的数据

<template>
  <div class="home">
    <h1>{{name}}</h1>
  </div>
</template>
<script>
import{mapState}from "vuex";//引用方法 在页面组件export default的内容之前引入vuex提供的专门获取vuex中state中所有变量函数mapState
export default {
  computed:{
    ...mapState(["name"])//
  }
}
</script>

或者在页面中直接通过$store.state.name获取到仓库中的数据，最底层的方法适合少量的数据

3、在vuex中Mutations中定义专门修改State中变量的修改函数

在组件expore default{}之前引入Vuex提供的专门提取Vuex中所有State变量和Mutations方法的函数：mapState和mapMutations
1、在子页面中获取数据

<template>
  <div class="about">
    <h1>请输入一个数据</h1>
    <input type="text" v-model="name">
    <button @click="dian">点击传值</button>//点击按钮将input中的值传给另外一个页面
  </div>
</template>
<script>
import{mapMutations}from 'vuex';//引入方法
export default {
  methods:{...mapMutations(['setname']),//将修改的数据通过自定义名setname传入仓库
  dian(){
     this.setname(this.name);
  }},
  data(){
    return{
      name:''
    }
  },
}
</script>

修改数据也可以直接通过this.$store.commit(‘setname’,this.name)进行修改，也是底层方法
2、在store中index页面代码

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    name:""
  },
  mutations: {
    setname(state,name){//这里的name是形参，可以自定义 表示传入的值
      state.name=name
    }//将传输得到的name值赋值到state中的name
  },
  actions: {
  },
  modules: {
  }
})

3、在主页面中显示获取到的数据

<template>
  <div class="home">
    <h1>{{name}}</h1>
  </div>
</template>
<script>
import{mapState}from "vuex";//引入上述得到仓库数据的方法
export default {
  computed:{
    ...mapState(["name"])//得到仓库state中name的值
  }
}
</script>