【Vue十日谈】浅谈vuex

---

vuex的概论

一、什么是vuex

关于组件之前的数据管理和传递，相信一定都了解过什么子传父用$emit，父传子用props，兄传兄用事件总线。这样实在是太麻麻烦烦且难记，这样吧，我们现在使用一个插件，这样我们就可以不用在乎什么父子兄，有了这个插件，所以的组件都可以任意传值接收，这个插件就是本篇主角————vuex

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

二、使用场景

1. 多个组件依赖于同一状态
2. 来自不同组件的行为需要变更同一状态(数据)

三.工作原理

state:
1. vuex 管理的状态(数据)对象
2. 它应该是唯一的
actions:
1. 值为一个对象，包含多个响应用户动作的回调函数
2. 通过 commit( )来触发 mutation 中函数的调用, 间接更新 state
触发 actions 中的回调
在组件中使用: $store.dispatch(‘对应的 action 回调名’) 触
可以包含异步代码（定时器, ajax 等等）
mutations:
值是一个对象，包含多个直接更新 state 的方
谁能调用 mutations 中的方法？如何调用
在 action 中使用：commit(‘对应的 mutations 方法名’) 触发
getters；
值为一个对象，包含多个用于返回数据的函数
如何使用？—— $store.getters.xx

四.使用步骤

1.搭建环境

1.安装vuex

使用npm,在终端中使用安装，输入命令npm i vuex

2.引入vuex

import Vuex from ‘vuex’
Vue.use(Vuex)
Vue.use(Vuex)

这里首先你得创建一个文件叫做index.js

该文件用于创建Vuex中最为核心的store

在index.js中引入

// 引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from "vuex"
// 使用vuex插件
Vue.use(Vuex)

3.在main.js中配置store

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


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

2.vuex使用

1.actions：
xxx.vue里面

this.$store.dispatch('aaa','要传的值')

index.js

aaa(context,value){context.commit('aaa',value)}

2.mutations
index.js

aaa(context,value){context.commit('aaa',value)}

3.state
在xxx.vue里面

{{$store.state.sum}}

index.js里面

sum:0

store配置案例:

// 准备actions，用于响应组件中的动作
const actions = {
    jiaOdd(context, value) {
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    jiaWait(context, value) {
        setTimeout(() => {
            context.commit('JIA', value)
        }, 2000)
    }
}

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

    },
    JIAN(state, value) {
        state.sum -= value
    },
    ADD_PERSON(state, personObj) {
        state.personList.unshift(personObj)
    }
}

// 准备state，用于存储数据
const state = {
    sum: 0,
    school: 'atguigu',
    subject: '前端',
    personList: [{
        id: '001',
        name: '张三'
    }, {
        id: '002',
        name: '李四'
    }]
}

// 准备getters,用于将state中的数据进行加工
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}



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

相关组件案例:

increment() {
      this.$store.commit("JIA", this.n);
    },
    decrement() {
      this.$store.commit("JIAN", this.n);
    },