Vuex简介

每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:

  1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

  2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

说白了,vuex就是一个工厂,里面包含存放数据的仓库。


image.png

state 仓库,里面存放数据
getter 搬运工小组,有无数个搬运工,只负责从厂房往外搬东西
mutation 操作工小组,有无数个操作工,负责更新货物,只能同步进行
action 操作工小组,有无数个操作工,负责更新货物,可以异步进行
module 工厂里的厂区,vuex里面可以有无数个厂区
安装:npm install vuex --save

//store->index.js配置
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import actions from './action'
import actions from './action'
import getters from './getters'

Vue.use(Vuex)



export default new Vuex.Store({
        state,
    getters,
    actions,
    mutations
})
//main.js导入index.js并添加到Vue实例
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。