了解学习vuex是什么，有什么作用，有什么状态【常用】

vuex是什么？

vuex是一个专门为vue.js设计的集中式状态管理架构。

五个核心

五个核心：

state： 存储数据的地方

actions： 异步操作

mutations: 同步操作，只有mutations可以修改state中的数据

getters： 相当于 state的计算属性。

modules模块化 modeA, modeB，modeC

vuex是使用vue中必不可少的一部分，基于父子、兄弟组件让我们来了解一下

第一步先引入vuex
(前提必须使用vue框架)

    npm install vuex --save 

第二步，新建一个store文件夹（这个不是必须的），并在文件夹下js新建j’s文件，文件中引入我们的vue和vuex。

    import Vue from 'vue';
    import Vuex from 'vuex';
    Vue.use(Vuex)

第三步，在main.js 中引入新建的vuex文件

    import index from './vuex/store'

第四步 在实例化 Vue对象时加入 store 对象 :

new Vue({
  el: '#app',
  router,
  store,//使用store
  template: '<App/>',
  components: { App }
})

备注：

1. 只有commit()才可以触发mutations中的方法 （可以在组件中调用，也可以在actions中调用）
2. 只有dispatch()才可以触发actions中的方法 （只能在组件中调用）
3. vuex 是单向数据流
4. 只有mutations才可以修改state中数据。
5. Es6 规范：
   导入模块 —> import xxx from ‘路径’
   导出模块 —> export default {}
   小小的注意：可以用es6中的解构赋值(按需导入)语法
   import { modea,modeb } from ‘/home/xxx.js’
   A: 公用的方法库， export default { a:functin(){},b:function(),c:function(){}}
   B:import { c } from ‘/A.js’
   c()
   commomjs规范（nodejs）
   导入模块： require(‘路径’)
   导出模块： module exports { }

vuex语法糖辅助函数

语法糖，四大金刚辅助函数：mapState,mapActions,mapMutations,mapGetters

import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'


computed:{
    ...mapState({
        a:"a",   //  "a" 指的是state中的a
        b:"b"
    }),
    ...mapGetters({
        Val:'newVal' // 可以重新命名
    })
}

methods:{
    ...mapActions({
        getSync:'getSyncNum'
    })

    ...mapMutations({
        increament:"increament"
    })
}

modules 模块化管理数据

//创建store，分模块定义

const  test1 ={
}
const test2 = {
    namespaced:true,
    state:{},
    actions:{},
    mutations:{
        
        }
    },
    getters:{}
}

new Vuex.Store({
    state:{name:"root"},
    actions,
    mutations,
    getters 
    modules:{
        test1,
        test2
    }

})
在组件中使用：
{{this.$store.state.name}}
{{name}}
computed:{
    ...mapState({
        name:“name## 标题"
    }),
    ...mapState('test',{   
        test1Name:'name'
    })
}
methods:{
    ...mapMutations('test1',['changeName'])
}

你学到了多少呢？