新手Vuex入门之state第一篇

最新推荐文章于 2022-08-17 13:52:20 发布

家里的喵

最新推荐文章于 2022-08-17 13:52:20 发布

阅读量358

点赞数

分类专栏： Vue 文章标签： Vuex state Vue

本文链接：https://blog.csdn.net/huanlesyaya/article/details/103345942

版权

Vue 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

1.state

大家都知道Vue中做组件通信有props，$emit来解决，但是这种方法在一些比较复杂的通信的时候，弊端就出来了，如下场景说

1.祖祖祖父要传给曾曾曾孙，一个简单的数据要从祖宗十八代传到你这一代，其中还不能断了

2.兄弟节点间的通信，可能需要父组件的支持,但是兄弟之间的事情，为什么一定要让老爸知道呢，这点在Vue设计中也是不太合理的存在的，所以就会有Vuex的出现，类似一个全局的概念，姑且当做这么理解了

关于VUEX之state的自我解释：

我自己理解为:要设置全局访问的state对象，相当于数据库，定义数据的默认值跟结构,你可以在这里定义自己想要数据类型,比如说数组,字符串，对象，然后在别的组件中获取你定义在state里面的状态值,上个简单demo

 	import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
      state: {
        isShowToast: 0//全局定义一个初始属性值,默认为false,
        products:['apple','pear','orange','banana','apple'],//全局定义一个水果数组，
        count:0,//全局定义一个计数
      }
    })

那么我们如何在Vue组件中显示我们定义的数据呢？由于Vuex的状态存储是响应式的,从store实例中读取状态最好的办法就是从计算属性中返回某个状态,如下：

  // 创建一个 Counter 组件
    const Counter = {
      data () { 
        return {} 
      },
      template: `<div>{{ count }}</div>`,
      computed: {
        count () {
          return store.state.count
        }
      }
    }

每当store.state.count变化的时候，都会重新求取计算属性，并且触发更新与之关联状态的DOM,如果你把 store.state.count 放在 data 中， store.state.count 的变化是不会主动触发界面刷新的，当然，也不能直接这样：

<template>
    <div>{{ store.state.count }}</div> 
</template>

因为在模板中是无法直接访问到 store 对象的，所以这样写无疑会报错

需要注意的是，如果有多个Vue组件都用到了state里面的数据，那么我们都需要把store引入进来,这样操作不好维护，也令人抓狂，所以Vuex官方提供了一种机制：

Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）：

  const app = new Vue({
      el: '#app',
      // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
      store,
      components: { Counter },
      template: `
        <div class="app">
          <counter></counter>
        </div>
      `
    })

通过在根实例中注册 store 选项，该 store实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。让我们更新下 Counter 的实现：

 const Counter = {
      template: `<div>{{ count }}</div>`,
      computed: {
        count () {
          return this.$store.state.count
        }
      }
    }