vuex

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>
         
     }
  }