一、vuex是什么，工作原理是什么？

vuex：集中数据共享

通过Vue.ues()安装vuex插件

vuex插件是一个对象，它的内部实现了一个install方法，这个方法会在安装插件时被调用，

从而把Store注入到vue实例里

veux的工作原理

state->vue components->actions->mutations->state->重新解析组件，渲染页面

1.什么时候actions很有有用？

需要的数据需要从另一台服务器上获取时。不需要另一台服务器提供数据时直接commit把东西交给mutations（不发ajax请求=不需要从另一条服务器上获取数据）

vuex的三兄弟相当于：action服务员 mutations厨师 state菜

数据类型： actions对象，mutations对象，state对象

2.为什么store管理他们3个？

因为dispatch与commit都是store身上的方法

二、如何使用vuex

1.npm i vuex@3 （我用于vue2项目的）不成功可参见官网

2.Vue.ues(Vuex)

3.store(创建)

4.vc==>store（让组件看得见store）

2.搭建vuex环境

1.根目录创建vuex文件夹在其中创建store.js

2.根目录创建store文件夹在其中创建index.js(官网方法)

1.store(创建)

在src->store->index.js创建store 搭建store的开发环境

//引入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
})

3.在main.js（vue项目）

import最先被解析,无论它在何位置，所有将Vue.ues(vuex)放到store->index.js中去解析

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

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

可在App.vue的script中与data平级添加生命周期函数： mounted() { console.log('APP',this); } 可查看vc上的所有元素，当你发现$store时，说明vuex环境搭建成功！！！

-----搭建好了全局可用的store（既搭建好了vuex环境）----

3.如何实现第一次完整的数据共享

前提条件：vue2

准备App.vue如下，以及上面配置好的两个(main.js与store(index.js))

<template>
  <div>
        <div>sum:{{ sum }}</div>
        <button @click="addSum">sum++</button>
  </div>
</template>

<script>
    export default {
    name: 'App',
    data() {
        return {
            n:2
            sum:0
            }
    },
    methods: {
        addSum() {
        this.sum+=this.n
    }
    },
    mounted() {
    console.log('APP',this);
     }
    }
</script>

01.main.js改造为

......
<div>
        <!-- 实现store数据共享 -->
        <div>sum:{{ this.$store.state.sum }}</div>
        <button @click="addSum">sum++</button>
  </div>
......
methods: {
        addSum() {
            //调用dispatch传递（事件名称，需要传递的值）
        this.$store.dispatch('jia',this.n);
    }
    },
......

02.index.js改造为

......
//准备actions对象——响应组件中用户的动作
const actions = {
    //每一个事件都默认可以接收2个参数
    jia(context,value) {
        // console.log(context, value);
        //commit向下传递（'事件名称',值）
        context.commit('JIA', value)
    }
}
//准备mutations对象——修改state中的数据
const mutations = {
    JIA(state,value) {
        // console.log(this);
        //处理数据，此时共享的store中的sum值也随之改变
       state.sum += value
    }
}
//准备state对象——保存具体的数据
const state = {
    sum:0
}
......

-----现在点击页面上的按钮，数据共享成功了----

什么是vuex？