vuex的使用场景和基本用法

一、vuex是什么？
vuex是一个用来管理组件之间通信的插件，它是一个专为【vue.js】应用程序开发的状态管理模式，它解决了组件之间同一状态的共享问题，它能够更好地在组件外部管理状态。

二、为什么需要vuex？
当多个组件依赖于同一个状态时，由于多层组件之间的嵌套使得传参数的方法变得更加复杂，另外如果使用父子组件直接饮用或者通过事件来变更和同步状态的多酚拷贝，会使得该模式变得脆弱，从而无法维护代码。

三、什么时候什么情况下使用vuex？
构建一个中大型单页应用，需要考虑到如何更好地在组件外部管理状态。

注意：如果不是开发大型单页应用，使用vuex可能是繁琐冗余的，也就是本来很快就可以开发完成的项目，用了vuex，结果却复杂了。一般简单的store模式就可以了。

四、vuex的五个核心概念？
state、getters、mutations、actions、modules

① state：存放的属性（数据变量）。

② getters：从基本数据（state）派生的数据，相当于state的计算属性。

③ mutations；同步提交更新数据的方法。必须是同步的（异步的话使用action）。每个mutations都有一个字符串的事件类型（type）和一个回调函数（hander）。

④ actions：异步提交更新数据的犯法。和mutations的功能是大致相同的，不过不同之处：actions提交的是mutations，而不是直接去修改state里面的数据变量。actions可以包含任意异步操作。

⑤ modules：vuex模块化。当应用变得复杂时，也就是中大型项目，store对象中的数据就变得非常的庞大。为了解决这个问题，vuex允许将store分割成模块（module）。每个模块拥有自己的state、mutation、action、getter、甚至是以同样的方式一直分割下去。
一、适合初学者使用，保存数据以及获取数据

1、在store文件夹，新建个index.js文件（命名看个人习惯，如果没有该文件夹，可以新建一个，当然也可以不建文件夹，直接新建个js文件也是可以的）

在新建的js文件中写入如下代码:

import Vue from "vue"
import Vuex from "vuex"
 
Vue.use(Vuex);
 
export default new Vuex.Store({
    state:{
        pathName: "",
        currDbSource: {},
        currJobData: {},
        DbSource: []
    },
    mutations:{
        // 保存当前菜单栏的路径
        savePath(state,pathName){
            state.pathName = pathName;
        },
        // 保存当前点击的数据源
        saveCurrDbSource(state,currDbSource){
            state.currDbSource = currDbSource;
        },
        // 保存当前点击的元数据
        saveCurrJobData(state,currJobData){
            state.currJobData = currJobData;
        },
        // 保存所有数据源
        saveDbSource(state,DbSource){
            state.DbSource = DbSource;
        }
    }
})

这里解释一下各个代码段的作用：state是自定义的一些变量，需要用来保存数据，mutations是用来触发事件，相当于方法，用户需要通过触发这个方法，借此来保存数据，参数的话，第二个参数就是用户传入的值，然后在方法中赋值给state中的变量

2、main.js引用：（注意路径即可）

// 引入vuex-store
import store from './store/index';
 
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
});

3、保存数据：（场景举例：当我点击按钮后，我需要把当前的数据保存到vuex中，然后跳转到别的路由，然后使用这些数据）

methods:{
    click(){
        // 点击按钮进行一些操作，然后保存数据
        this.$store.commit('saveCurrDbSource',this.db)
    }
}

这里的第一个参数是要触发的方法，也就是上面mutations中的方法，第二个参数是你要传递的数据

4、获取变量：（当数据初始获取不到时，可以使用计算属性用来获取）

this.$store.state.变量名
 
// 例如
this.store.state.currDbSource

这样其他组件就可以共用这个保存起来的数据了，也能进行相应的修改