Vuex中的State

最新推荐文章于 2025-05-23 01:19:24 发布

chenyongzhi1218

最新推荐文章于 2025-05-23 01:19:24 发布

阅读量261

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： Vue Vuex State 单一状态树

本文链接：https://blog.youkuaiyun.com/chenyongzhi1218/article/details/103374103

Vue 专栏收录该内容

16 篇文章

订阅专栏

State

单一状态树

一、什么是单一状态树

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

二、在 Vue 组件中获得 Vuex 状态

引入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

挂载到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)
})

使用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使用总结

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