Vuex的使用

Vuex就可以一步解决父传子,子传父的问题,直接一步到位

1.安装和使用代码

//安装
npm install  vuex@next --save
//引入
import {useStore} from 'vuex'

2.创建数据仓库

代码:

import {createStore} from 'vuex'

//创建数据仓库
export default createStore({
    //数据仓库的内容,名称不能乱写
    state:{name:'马云'},
    //--------------------使用以下方法调用数据仓库里的数据-------------------------------
    //同步调用
    mutations:{

    },
    //异步调用
    actions:{

    }
})

然后在数据仓库中写相关的函数
注意:如果要使用异步调用得在里面调用同步调用使用commit方法,异步调用的方式是dispatch

import {createStore} from 'vuex'

//创建数据仓库
export default createStore({
    //数据仓库的内容,名称不能乱写
    state:{name:'马云',company:'阿里巴巴'},
    //--------------------使用以下方法调用数据仓库里的数据-------------------------------
    //同步调用
    mutations:{
        trigger(state){
            console.log('我是被actions调用的')
            state.name='马化腾'
        },
        exchange(state,val){
          state.company=val
        }
    },
    //异步调用:必须要调用同步调用
    actions:{
        sub(store){
            console.log('************');
            //使用commit调用同步调用
            store.commit('trigger');
        }
    }
})

3.在main.js注入数据仓库

main.js代码:

import {createApp} from 'vue'
import App from './App.vue'
//引进数据仓库
import createStore from './store/index.js'

const app = createApp(App)
app.use(createStore)
app.mount('#app')

4.使用数据仓库中的数据

vuexchirld代码:

<template>
  <h1>子组件</h1>
  <p>name:{{ res }}</p>
  <p>company:{{company}}</p>
  <button @click="btn">点击修改姓名</button>
  <button @click="btn1">点击修改公司</button>
</template>

<script>
import {computed} from 'vue'
import {useStore} from "vuex";

export default {
  name: "Vuex-chirld",
  setup() {
    console.log("进入子页面");
    //从vuex数据仓库里存储数据
    const store = useStore();

    //使用计算属性调用数据仓库
    const res = computed(() => {
      return store.state.name;
    });
    const company=computed(()=>{
      return store.state.company
    })

    //点击调用vuex并且改变vuex仓库里的数据
    function btn() {
      //异步调用:dispatch
      store.dispatch('sub')
    }
    function btn1(){
      //同步调用
      store.commit('exchange','腾讯公司');//也可以传递{},[]
    }

    return {
      res,
      btn,
      btn1,
      company
    }
  }
}
</script>

<style scoped>

</style>

vuexparent代码:

<template>
  <div class="back">
    <h1>我是父组件</h1>
    <p>{{res}}</p>

  </div>
  <div>
    <vuex-chirld></vuex-chirld>
  </div>


</template>

<script>
import {computed, provide, reactive, ref} from "vue";
import vuexChirld from "@/components/Vuex-chirld";
import {useStore} from "vuex";

export default {
  name: "Vuex-parent",
  components:{
    vuexChirld
  },setup(){
     //从vuex数据仓库里存储数据
    const store = useStore();
    //使用计算属性调用数据仓库
    const res = computed(() => {
      return store.state.name;
    })
    return {
      res,
    }

  }
}
</script>

<style scoped>
div{
  height: 200px;
  border: red 1px solid;
}
</style>

最终显示效果,子组件中点击修改,数据变了之后父组件也会跟着变,没有什么父传子和子传父的要求.