vuex中的Store

Vuex是一个用于管理Vue.js应用程序状态的插件,提供响应式状态存储和一系列核心概念,如state、getters、mutations、actions及module。Store是Vuex的核心,用于集中管理状态,改变状态需要通过commit mutations,而actions可以包含异步操作并触发mutations。在组件中,$store是Vue实例上挂载的属性,用于访问store的方法和属性。
摘要由CSDN通过智能技术生成

1. Vuex是什么

在了解Store之前,我们先来看看Vuex是个什么东西。Vuex本质上就是一个Vue.js的插件,是用于对复杂应用进行状态管理用的,打印Vuex以后输出:

{

​ Store: function Store(){},

​ mapActions: function(){}, // 对应Actions的结果集

​ mapGetters: function(){}, // 对应Getters的结果集

​ mapMutations: function(){}, // 对应Mutations的结果集

​ mapState: function(){}, // 对应State的结果集

​ install: function install(){},

​ installed: true

}

Vuex和单纯的全局对象有以下两点不同:

  • Vuex的状态存储是响应式的。当Vue 组件从 Store 中读取状态的时候,若 Store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
  • 不能直接改变 Store 中的状态。改变Store 中的状态的唯一途径就是显式地提交 mutation

2. Store

每一个Vuex应用的核心就是Store(仓库),我们可以说Store是一个容器,Store里面的状态与单纯的全局变量是不一样的,无法直接改变Store中的状态。想要改变Store中的状态,只有一个办法,显式地提交mutation。

3. 一个完整的Store结构

const store = new Vuex.Store({
  state: {
    // 存放状态
  },
  getters: {
    // state的计算属性
  },
  mutations: {
    // 更改state中状态的逻辑,同步操作
  },
  actions: {
    // 提交mutation,异步操作
  },
  // 如果将store分成一个个的模块的话,则需要用到modules。
   //然后在每一个module中写state, getters, mutations, actions等。
  modules: {
    a: moduleA,
    b: moduleB,
    // ...
  }
});

4. 状态管理的几个核心概念

  1. state

state是状态数据,可以通过this.$store.state来直接获取状态,也可以利用vuex提供的mapState辅助函数将state映射到计算属性(computed)中去。用data接收的值不能及时响应更新,用computed就可以:

export default {
  data () {
    return {
      dataCount: this.$store.state.count //用data接收
    }
  },
  computed:{
    count(){
      return this.$store.state.count //用computed接收
    }
  }
}

mapState 辅助函数:

mapState是state的语法糖,当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键:

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态,必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState 传一个字符串数组。

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

     2.getter

getters本质上是用来对状态进行加工处理。Getters与State的关系,就像Vue.js的computed与data的关系。getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。可以通过this.$store.getters.valueName对派生出来的状态进行访问。或者直接使用辅助函数mapGetters将其映射到本地计算属性中去。

mapGetters 辅助函数:

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:

import { mapGetters } from 'vuex'
export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

mapGetters实际上是一个方法Vuex对象上的一个方法,这从本文开头打印的那个Vuex对象的内容可以看出来。…这个符号是ES2015的一个新的语法糖,即将mapGetters处理后的内容展开后填入。

如果你想将一个 getter 属性另取一个名字,使用对象形式:

mapGetters({
  // 映射 `this.doneCount` 为 `store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

       3.mutation

mutations的中文意思是“变化”,利用它可以更改状态。事实上,更改 Vuex 的 store 中的状态的唯一方法就是提交 (commit)mutation。不过,mutation触发状

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值