Vue (16) — 初识Vuex、搭建Vuex环境、基本使用

目录

一、理解Vuex

  1.Vuex是什么

  2.什么时候使用Vuex

  3.Vuex工作原理图 

二、搭建vuex环境

  1.创建文件：src/store/index.js

  2.在main.js中创建vm时传入store配置项

三、基本使用

  1.初始化数据、配置actions、配置mutations、操作文件store.js

  2.组件中读取vuex中的数据

  3.组件中修改vuex中的数据

---

一、理解Vuex

  1.Vuex是什么

概念：专门在Vue中实现集中式状态（数据）管理的一个 Vue 插件，对 Vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

下面两张图是多组件共享数据分别用全局事件总线实现和用vuex实现的比较：

  2.什么时候使用Vuex

        1.多个组件依赖于同一种状态

        2.来自不同组件的行为需要变更同一状态

  3.Vuex工作原理图 

二、搭建vuex环境

  1.创建文件：src/store/index.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vue插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {}
//准备mutations——用于操作数据(state)
const mutations = {}
//准备state——用于存储数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})

  2.在main.js中创建vm时传入store配置项

......
//引入store
import store from './store'
......

//创建vm
new Vue({
    el:'#app',
    render:h => h(App),
    store
})

三、基本使用

  1.初始化数据、配置actions、配置mutations、操作文件store.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {
    //响应组件中加的动作
    jia(context, value) {
            context.commit('JIA', value)
    }
}

//准备mutations——用于操作数据(state)
const mutations = {
    //执行加
    JIA(state, value) {
        //console.log('mutations中的加被调用了');
        state.sum += value
    }
}

//准备state——用于存储数据
//初始化数据
const state = {
    sum: 0,
}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})

  2.组件中读取vuex中的数据

        $store.state.sum

  3.组件中修改vuex中的数据

        $store.dispatch('actions中的方法名',数据) 或 $store.commit('motations中的方法名',数据)

 

备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch,直接编写commit