前端Vue2-Day58

Vuex：在Vue中实现集中式状态(数据)管理的插件，对vue中多个组件的共享状态进行集中式的管理(读/写)。是专为Vue.js应用开发的状态管理模式+库。可实现任意组件间通信。

 

多组件共享数据：多组件共享数据，使用全局事件总线，重复方法过多来回读写数据造成冗余。

 

 

 

使用Vuex的时机：

① 多个组件依赖于同一个状态。

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

 

Vuex工作原理：

 

搭建vuex环境：

① 创建文件src/store/index.js：使用new Vuex.Store({state，actions，mutations})创建vuex核心store实例

// 用于创建 vuex 中核心 store
// 引入vuex
import Vuex from 'vuex'
// 应用vuex插件
import Vue from 'vue'
Vue.use(Vuex)
// 准备actions:响应组件中的动作
const actions = {}
// 准备mutations:用于操作数据(state)
const mutations = {}
// 准备state:用于存储数据
const state = {}

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

注意：创建vuex的store属性，必须先进行vue.use使用，由于import会在最先进行。故需要在index中创建vue实例use，而不能在入口文件main.js中进行use！

② 在main.js中导入并配置store：

import Vue from "vue";
import App from './App.vue'
// 引入store
import store from './store/index'

Vue.config.productionTip = falsenew Vue({
    render: h => h(App),
    store,
}).$mount('#app')

 

vuex基本使用：

① 初始化数据，配置state、配置actions、配置mutations、操作文件store.js。

// 配置state存储数据
const state = {data}
// 响应组件中发起的动作
const actions = {
    demo(context, value) {
        context.commit('DEMO', value)
    }
}
// 操作响应actions发起的请求,操作实际数据
const mutations = {
    DEMO(state, value) {
        state.data = ....
    }
}

② 组件中读取vuex中的数据：在模板中：$store.state.data  在组件配置中：this.$store.state.data

③ 组件中修改vuex中的数据：$store.dispatch('action中的方法名'，数据) 和 $store.commit('mutations中的方法名'，'数据')

注意：若没有网络请求(ajax)或其他业务逻辑，组件也可直接越过actions，直接访问mutations。