16-vuex

1. 概念

在vue中实现集中式状态(数据)管理的一个 vue 插件。对vue应用中多个组件的共享状态(数据)进行集中式的管理(读、写),也是一种组件间的通信方式,适用于任意组件间通信。

2. 何时使用

多个组件需要共享数据时候

3. 搭建 vuex 环境

  1. 创建文件 src/store/index.js
//引入vue核心库
import Vue from 'vue'
//引入 vuex
import Vuex from 'vuex'
//应用vuex插件
Vue.use(Vuex)

//准备actions 对象--用于响应组件的动作
const actions = {}

//准备 mutations 对象--用于修改 state 中的数据
const mutations = {}

//准备 state 对象--用于保存数据
const state = {}

//创建并暴漏 store
export default new Vuex.Store({
  actions,
  mutations,
  state
})
  1. main.js 中创建vm时候传入 store配置项
...
//引入 store
import store from './store/index.js'
....

//创建 vm
new Vue({
  el:'#app',
  render:h=>h(App),
  store
})
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 目录 Vue组件间通信方式回顾组件内的状态管理流程组件间通信方式父组件给子组件传值 (最简单的一种方式)子组件给父...
    顽皮的雪狐七七阅读 755评论 0 3
  • 一、前言 当我们的应用遇到多个组件共享状态时,会需要多个组件依赖于同一状态抑或是来自不同视图的行为需要变更同一状态...
    浪里行舟阅读 1,554评论 0 8
  • 1.概念 在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 vue 应用中多个组件的共享状态进行集...
    5cc9c8608284阅读 145评论 0 1
  • Vuex 作用:管理多个组件或者全局共享的状态。将复杂的、需要共享的逻辑处理放入actions中共享。 ( 为什么...
    恒星的背影阅读 554评论 0 0
  • Vuex Vuex是一个专门为Vue.js应用所设计的集中式状态管理架构,它借鉴了Flux和Redux的设计思想,...
    JunChow520阅读 1,581评论 2 0