vuex是什么以及如何使用

官方答案：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态
并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex有五个核心概念：

state、getters、mutations、actions、modules。

1、state：vuex数据 用来存储变量。

2、geeter：计算属性

3、mutation：同步操作 可以直接更改state里的状态

4、action：和mutation的功能大致相同，不同之处在于action提交的是mutation，而不是直接变更状态 但是它里面可以做任意异步操作。

5、modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

话不多说 上代码
首先 我们在store里的state定义变量

export default new Vuex.Store( {
    state: {
        bannerList: [],   //轮播
        teacherList: [],   //teacher列表
    },
    mutations: {
        //这里有两个参数  一个是state 这样我们可以获取它的值   一个是要提交的数据  然后进行修改这里的items是形参
        BANNER(state,items){
            state.bannerList=[...items]          //扩展运算符
        },
    },
    actions: {
        //异步里必须通过commit来触发mitation函数修改state
        BANNER(context) {
        //getBanners是我封装好的请求方法     这里可做axios请求
            getBanners().then(res => {
           // commit有两个参数  第一个是提交的mitation函数名   第二个是提交的数据  这里的是实参
                context.commit('BANNER',res.data.data)
            });
        },
      
    },
    modules: {}
})

然后我们在需要数据的组件内通过**this.$store.dispatch(‘action函数名’)**触发action函数
想要获取vuex里state的数据 必须通过vue中的computed获取需要的数据

<script>
  export default {
  //vue创建后的生命周期
    created() {
      this.$store.dispatch('RECORD')     //提交函数获取数据
    },
    computed:{
    //return 的数据是vuex里state的数据  然后数据就可以拿来渲染
      recordList(){
        return this.$store.state.classifyModule.recordList
      }
    }
  }
</script>