Vuex （实现任意组件之间的数据交互）

最新推荐文章于 2022-09-15 21:58:21 发布

艺术就是派大星220

最新推荐文章于 2022-09-15 21:58:21 发布

阅读量454

点赞数 1

分类专栏： vue 文章标签： vue.js vue

本文链接：https://blog.csdn.net/Rossbort/article/details/120385726

版权

 
  vuex 是为了解决 组件间的数据交互；专门针对vue的一种数据管理模式
  1-创造一个vuex实例 创造时传递的参数 就是我们的配置项
  state
  mutations
  actions
  getters
  modules

  2- 把创造的实例 注入到根组件中 store: 实例；
      注入完成之后  每一个组件中 都多了一个$store的属性，$store中的state中的存储的就是我们的数据源 

  配置项中的 state
    是存储了 我们需要用到的公用数据，更改这里边的数据 可以流氓更改(不建议)；最好是用官方推荐的mutations
  配置项中的 mutations
    这个属性中存储的都是用来更改 state中的数据的 方法，这些方法都至少有一个参数state,最多两个
    第一个参数是vuex默认传的 state(数据源)  第二个参数 是我们通过 commit调用mutations中的对应方法的时候
    传递的参数(this.$store.commit('mutations中的方法名',传过去的参数))   
    官方规定 mutations中的函数必须都是同步函数（为了数据变化可追踪）  
    异步需要写actions中；
  配置项中的 actions
    这个属性中存储的 一般都是一些异步执行的方法， 为了在异步执行完成之后 再去通过 commit触发mutations中的对应函数
    这些函数参数： 第一个 是默认穿的store  第二个参数是我们在通过dispatch调用时传递的参数；
    this.$store.dispatch('actions中的方法名'，传给他的参数)

  配置项中的 getters 就是vuex的计算属性

案例一；有两个组件bor1和bor2，每个组件各有一行字体和一个按钮，实现点bort1的按钮，bor2的字体颜色改变，点击bor2的按钮，bort1组件的字体颜色改变

<body>
    <div id="app">
        <h1>{
  {name}}</h1>
        {
  {$store.state.color}}
        <bro1></bro1>
        <bro2></bro2>
    </div>
</body>
</html>

<template id='bro1'>
  <div>
    // color:$store.state.bro1Colo $store上的state挂载着自己设置的全部公共数据，直接调用即可
    <h1 :style='{color:$store.state.bro1Color}'>这是一个bro1组件</h1>
    {
  {$store.state.color}}
    <button @click='fn1'>按钮1</button>
  </div>
</template>

<template id='bro2'>
  <div>
    <h1 :style='{color:$store.state.bro2Color}'>这是一个bro2组件</h1>
    {
  {$store.state.color}}
    <button @click='fn2'>按钮2</button>
  </div>
</template>


<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vuex/dist/vuex.js"></script>
<script>
    /*

最低0.47元/天解锁文章

艺术就是派大星220

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vuex （实现任意组件之间的数据交互）

<body> <div id="app"> <h1>{{name}}</h1> {{$store.state.color}} <bro1></bro1> <bro2></bro2> </div></body></html><template id='bro1'> <d.
复制链接

扫一扫