vuex

vuex
全局状态管理
- 多组件共享状态
  - 多个组件使用同一数据 (state)
  - 任何组件发生改变其他组件也要跟着发生相应的改变

核心概念

vuex

State

/steɪt/ z状态
在这里是全局状态值
在此配置项中可以放入数据.在任意组件里打印this.$store.state.属性名..都能取到该数据
```
state:{
name:'韩杰'
},
```

在任意组件中都可以使用.

 mounted () {
        console.log(this.$store.state.name)
    }

也可直接渲染
```
{{this.$store.state.name}}
```

Mutation

/mjuːˈteɪʃn/ 突变

修改全局状态值的方法必须写在这里

两个参数
- state中的数据
- 接受的参数

mutations: {
    changeName(state,params){
        console.log('修改的名字',state,params)
        //修改state数据的操作
        state.name  = params.name
    }
},

触发此函数

直接使用$store.commit()触发

两个参数

mutations里事件名

传递的参数

 methods: {
        but(){
            this.$store.commit('changeName',{name:1223,pa:456})
        }
    }

组件先触发Action里的方法.再在Action里触发mutations里的方法

触发Action里的方法

methods: {
        changeAge(){
            this.$store.dispatch('changeAgeAction', {age:666})
        }
    }

再在Action里触发mutations里的方法

actions: {
    changeAgeAction(context,params){
        console.log('触发',context,params)
        //结构去除commit属性
        let {commit} = context
        commit('changeAge',params)
    }
}

Action

/ˈækʃn/ 行动
要求网络请求放到Action里
通过dispatch方法触发到action
action 在通过commit方法触发mutations里的方法

组件先触发Action里的方法.再在Action里触发mutations里的方法

触发Action里的方法

methods: {
        changeAge(){
            this.$store.dispatch('changeAgeAction', {age:666})
        }
    }

再在Action里触发mutations里的方法

actions: {
    changeAgeAction(context,params){
        console.log('触发',context,params)
        //结构去除commit属性
        let {commit} = context
        commit('changeAge',params)
    }
}

统一异步管理.减少代码量.

actions代码

actions: {
    changeNameActions({commit},params){
        console.log(params)
        setTimeout(()=>{
            commit('changeName',params)
        },1000)
        
    }
}

组件调用

  methods: {
       change(){
          this.$store.dispatch('changeNameActions', {name:'韩杰123'})
           
       }
   }

时间旅行
- 是为了.有更准确的时间旅行时间

Getter

/'gɛtɚ/
类似于vuex里的computed计算器
用来处理数据的.

可以接受state数据,然后对数据进行处理并返回

getters: {
    double(state){
        return  state.age*2
    }
},

在任意组件中的this.$store.getters.方法名来取到getters 里面方法return返回的数据.也可直接渲染
```
{{this.$store.getters.double}}
```

Module

可以区分不同的模块

下面代码就是区分了hehe,xixi两个模块

 modules:{
  //  呵呵模块
   hehe:{
     namespaced:true, //开启命名空间,打印出来的方法前面会显示是属于哪一个模块
     state:{name:'韩梅梅'},
     mutations:{
       changeName(state){
         state.name='李雷雷'
       }
     },
     getters:{},
     actions:{}
   },
  //  嘻嘻模块
   xixi:{
     state:{age:16},
     mutations:{
       changeAge(state){
         state.age=99
       }
     },
     actions:{},
     getters:{}
   }
 }
})

注意state的使用会有所不同

前面需要加上模块名

  computed:{
    ...mapState({
      name:state=>state.hehe.name,
      age:state=>state.xixi.age
    })
  },

基本使用

下载/安装 npm install vuex

src下新建文件夹下js文件里创建全局状态管理实例并抛出

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

let store = new Vuex.Store({

})

export default store;

在main.js引入和注册

import store from './store/index'
new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

在组件中使用全局状态值
- 获取渲染全局状态值
  - 在配置项state里
- 修改全局状态值
  - 如果想修改全局状态值必须在mutations

辅助函数

值类型向计算属性里映射

帮助我们减少代码量
mapState
- 将state映射到计算属性上,,相当于取代this.$store.state这串代码

mapGetters

将getters映射到计算属性上,,相当于取代this.$store.getters这串代码

注意要写到computed计算属性内

<template>
    <div>
       name:{{this.$store.state.name}}
       <button @click="change">组件1</button>
    //使用方式
       mapstate:{{name}}
       {{double}}
    </div>
</template>

<script>
import {mapState,mapGetters} from 'vuex'
export default {
   computed: {
      ...mapState(['name']),
      ...mapGetters(['double'])

   },

其实上面的是简写..完整写法是如下

简写不能改名
对象能自定义名字

computed:{
...mapState(['name'])//使用的话使用{{name}}
//等同于
...mapState({hehe:(state)=>{//使用的话就使用{{hehe}}了
return state.name
}})
  //在es6中.如果箭头函数后面直接return的话可以简写为
  ...mapState({hehe:state=>state.name})
  //如果属性和属性值一直可以省略属性值
    ...mapState({name:state=>state.name})
    //等同于
     ...mapState({name})
    //在vuex要求写成这样
    ...mapState(['name'])
}

mapGetters的完整写法

也是简写不能自定义名字

//简写
...mapGetters(['double'])
//完整写法
...mapGetters({hehe:"double}")

函数类型向methods进行映射

mapMutations
- 将mutation的值映射到方法里
mapActions
- 将actions里的值映射到方法里

完整写法和mapGetters一样

import {mapActions,mapMutations} from 'vuex'
export default {
   
   methods: {
      ...mapActions(['changeNameActions']),
       //完整写法,只是如果属性和属性值一样的话可以简写
       ...mapActions({hehe:'changeNameActions'}),
       
       //和上面完整写法一样
      ...mapMutations(['changeName']),
       change(){
          //this.changeNameActions({name:'赵四'})
          this.changeName({name:'王五'})
           
       }
       //如果如上代码所示.change这个点击事件的名字如果也叫changeName的话可以简写
       ...mapMutations({changeName:'changeName'})
    //接着简写就是
    ...mapMutations(['changeName'])
    //也可以改名字
       ...mapMutations({hehe:'changeName'})
    //在页面上添加点击事件就叫hehe就行了.
    <button @click = 'hehe'></button>
       
   }
}