Vuex中的State

State

单一状态树

一、什么是单一状态树
  • Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (Single source of truth)”而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。
  • 但是,它是什么呢?我们来看一个生活中的例子。
    • 我们知道,在国内我们有很多的信息需要被记录,比如上学时的个人档案,工作后的社保记录,公积金记录,结婚后的婚姻信息,以及其他相关的户口、医疗、文凭、房产记录等等(还有很多信息)。
    • 这些信息被分散在很多地方进行管理,有一天你需要办某个业务时(比如入户某个城市),你会发现你需要到各个对应的工作地点去打印、盖章各种资料信息,最后到一个地方提交证明你的信息无误。
    • 这种保存信息的方案,不仅仅低效,而且不方便管理,以及日后的维护也是一个庞大的工作(需要大量的各个部门的人力来维护,当然国家目前已经在完善我们的这个系统了)。
  • 这个和我们在应用开发中比较类似:
    • 如果你的状态信息是保存到多个Store对象中的,那么之后的管理和维护等等都会变得特别困难。
    • 所以Vuex也使用了单一状态树来管理应用层级的全部状态。
    • 单一状态树能够让我们最直接的方式找到某个状态的片段,而且在之后的维护和调试过程中,也可以非常方便的管理和维护。
二、在 Vue 组件中获得 Vuex 状态
  1. 引入Vuex:(类似于Vue-Router的使用方式)

这里我们使用一个计数器的案例做演示,首先,我们需要在某个地方存放我们的Vuex代码,这里,我们先创建一个文件夹store,并且在其中创建一个index.js文件,并在index.js文件中写入如下代码:

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

// 1. 安装插件
Vue.use(Vuex)

// 2. 创建对象
const store = new Vuex.Store({
  state: {
    counter: 0,
  },
  mutations: {
    increment(state) {
      state.counter++
    },
    decrement(state) {
      state.counter--
    }
  }
})

// 3.导出store对象
export default store
  1. 挂载到Vue实例中

其次,我们让所有的Vue组件都可以使用这个store对象,来到main.js文件,导入store对象,并且放在new Vue
这样,在其他Vue组件中,我们就可以通过this.$store的方式,获取到这个store对象了

import Vue from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

  1. 使用Vuex管理counter
<template>
  <div>
    <h2>{{$store.state.counter}}</h2>
    <h2>{{counter}}</h2>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
</template>

<script>
  export default {
    name: 'HelloVuex',
    computed: {
      counter() {
        return this.$store.state.counter
      }
    },
    methods: {
      increment() {
        this.$store.commit('increment')
      },
      decrement() {
        this.$store.commit('decrement')
      }
    },
  }
</script>

<style scoped>

</style>
三、Vuex中的State使用总结
  1. 好的,这就是使用Vuex最简单的方式了。
  2. 我们来对使用步骤,做一个简单的小结:
    • 每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)
    • 提取出一个公共的store对象,用于保存在多个组件中共享的状态
    • store对象放置在new Vue对象中,这样可以保证在所有的组件中都可以使用到
    • 在其他组件中使用store对象中保存的状态即可
      • 通过this.$store.state.属性的方式来访问状态
      • 通过this.$store.commit('Mutations中方法')的方式来修改状态

注意事项:

  • 我们通过显式地提交Mutations的方式,而非直接改变$store.state.counter来修改counter状态。
  • 这是因为Vuex可以更明确的追踪状态的变化,同时可以使用官方提供的调试工具跟踪每一次的状态改变,所以不要直接改变$store.state.counter的值。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值