Vuex极其详细的介绍与使用（state：统一定义公共数据，mutations：使用他来修改数据，getters：计算属性，actions:发起异步请求，modules：模块拆分）Vuex-map函数_vuex的state和getter归于计算属性

Vuex是什么？

      Vuex是一个专为Vue.js应用程序开发的状态管理模块，采用集中式储存管理应用的所有组件的状态，解决多件数据通讯。 

要点：

        1.  集中式管理数据状态方案

        2 . 数据是响应式的 (修改数据页面也会随之改变)

---

Vue项目的使用Vuex:

1.在新项目中使用：

       在配置vue-cli中创建项目时，直接选中Vuex项，这样就可以不用做任何配置了（脚手架会帮我们完成所有相关配置）

 2.在老项目中：

      （1）安装

    npm i vuex

      （2）配置

                   ——创建Vuex.store实例

                  ——向Vue实例注入store

        （3）使用。在组件中使用

---

Vuex五个主要内容

        1.state：统一定义公共数据（类似date）

        2.mutations: 用来修改数据的（类似于methods）

        3.getters：计算属性，对现在的状态进行计算得到新的数据----派生（类似于cpmputed）

        4.actions：异步操作，发起异步请求（发起axios请求）

        5.modules:模块拆分，将以上五个部分进行模块haul拆分

---

Vuex-state 定义公共数据

    state作用：定义公共数据并在组件中使用

s格式：

new Vuex.store({
  state: {
   属性名： 属性值 
  }
})

实例：

new Vuex.store({
  state: {
    num:10,
    userInfo: {
       name: 'tom',
	 	   skills: ['抖音', 'B站', '美团'],
    	 address: '武汉黑马',
       logo: 'https://vuejs.org/images/logo.svg'
       //  https://www.runoob.com/wp-content/uploads/2016/02/react.png
    }
  }
})

使用：

在组件中，通过this.$store.state.属性名来访问。

  this.$store.state.num

在模板中，则可以省略this而直接写成： {{$store.state.属性名}}

<div>num:{{$store.state.num}}</div>

---

Vuex-mutations 修改数据

mutations作用：通过调用mutations来修改定义在state中的公共数据。

定义格式：

new Vue.store({
  // 省略其他...
  mutations：{
    // 每一项都是一个函数，可以声明两个形参
  	mutation名1：function(state [, 载荷]) {
  
    },
    mutation名2：function(state [, 载荷]) {
  
    },
	}
})

注意：

每一项都是一个函数，可以声明两个形参：

• 第一个参数是必须的，表示当前的state。在使用时不需要传入

• 第二个参数是可选的，表示载荷，是可选的。在使用时要传入的数据

 使用格式

this.$store.commit('mutation名', 实参)

实例：

new Vuex.store({
  state: {
    num:10,
    userInfo: {
       name: 'tom',
	 	   skills: ['抖音', 'B站', '美团'],
    	 address: '武汉黑马',
       logo: 'https://vuejs.org/images/logo.svg'
       //  https://www.runoob.com/wp-content/uploads/2016/02/react.png
    }
  }
})

const url = 'http://s02.mifile.cn/assets/static/image/logo-mi2.png'
this.$store.commit('changeUrl', url)

---

Vuex-getters 计算属性

getters作用：计算属性（类似于computed）在satate中的数据基础上进行一些加工的得到新的数据    ！！！敲黑板（不会改变原来的数据）

 定义格式：

new Vue.store({
    //省略其他
    getters：{
        gieters名1：function(state){
            return 要返回的数据
        }
    }
})

在组件中通过：$store.getters.getter的名字 来访问

$store.getters.getter名

---

state，mutetions，getters 逻辑图

---

vuex用actions发异步请求

actions作用：

• action中可以通过调用mutation来修改state，而不是直接变更转态
• action可以包含任意异步（例如ajax请求）操作

定义actions

new Vue.store({
    // 省略其他部分
    actions:{
        axtions名1:function(state,载荷){
           // 1.发起异步请求，请求数据
 
           // 2.通过$state.commit调用mutation来修改/保存数据
            
        }
    }
})

调用格式

this.$state.dispatch('acthion名',参数)

实例：

// 发ajax请求，从后端获取数据，再来去修改state中的数据
    actions: {
      getBooks (context, params) {
        console.log('getbooks的查询参数是', params)
        axios({
          url: 'https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books',
          method: 'GET'
        }).then(res => {
          console.log(res)
          context.commit('setBooks', res.data.data) //需要在mutations里面封装一个setBooks函数
        })
      }
    },

this.$store.dispatch('disBooks'，{id:1})   //没有参数就不传

actions一般用来发异步请求，数据回来之后，在去调用mutations来保存数据

---

Vuex-用 modules 来拆分复杂业务

modules作用

• 对实例Vuex.store的实参内容进行拆分，把复杂的场景模块进行拆分
• 使代码更加清晰，更容易维护。

格式：

export default new Vuex.store({
    stete:{},
    mutations:{},
    getters:{},
    actions:{},
    modules:{
        模块名1:{
            //namespaced为true，则使用mutations必须要带上模块名
            namespaced:true,
            stete:{},
            mutations:{},
            getters:{},
            actions:{},
            modules
        },
        模块名2:{
            //namespaced默认为false，使用mutations是可以不用带模块名
            namespaced:true,
            stete:{},
            mutations:{},
            getters:{},
            actions:{},
            modules
        },
        ......
    }
})    

访问模块中的数据：

获取state数据项：{{$store.state.模块名.数据项名}}
获取getters数据项：{{$store.getters['模块名/getters名']}}

访问模块中的mutations/actions：

• 如果namespaced为true，则不需要额外去补充模块名
• 如果namespaced为false，则需要额外补充模块名
• 在使用modules时，建议都给加上namespaced!

$store.commit('mutations名' , 参数)  //namespaced为false
$store.commit('模块名/mutations名' , 参数) //namespaced为true
 
$store.dispath('dispath名' , 参数)  //dispath为false
$store.dispath('模块名/dispath名' , 参数) //dispath为true

---

---

 action和mution和state的关系图

---

Vuex-map函数用法汇总

        

场景

vuex中的数据与本组件内的数据名相同

格式

...mapState({'新名字': 'xxx'})