Vuex

Vuex里面有5个配置属性：State、Getters、Mutations、Actions、Modules

　　一般，在Vuex里面我们都是通过state定义数据，通过mutations修改state里面的数据，而mutations里面不能操作异步代码，当有异步代码时，写在actions

 

 

 配置属性state的用法：

　　在Vuex里面添加一个状态

export default new Vuex.Store({
  state: {
    content: 0
  }
})

　　在组件中获取到content的值，有三种方法，第一种通过`this.$store.state.XXX`获取，代码如下：

<template>
  <div class="home">
    <div>
      {{ number }}
    </div>
  </div>
</template>
<script>

export default {
  computed: {
    number () {
      return this.$store.state.content
    }
  },

}
</script>

渲染如下：

 

 

第二种获取的方法，通过辅助函数...mapState，在组件中首先要引入辅助函数，代码如下：

<template>
  <div class="home">
    <div>
      {{ content }}
    </div>
  </div>
</template>
<script>
// 首先引入辅助函数
import { mapState } from 'vuex'
export default {
  name: 'Home',
  data () {
    return {}
  },
  computed: {
    ...mapState([
      'content'
    ])
  },
  methods: {

  }
}
</script>

第三种获取方法，通过vuex中的getters获取，getters会接收state为第一个参数

　　在vuex里面的代码如下：

export default new Vuex.Store({
  state: {
    content: 0
  },
  getters: {
    number: state => state.content
  },
})

　　在组件中通过...mapGetters辅助函数获取：代码如下

<template>
  <div class="home">
    <div>
      {{ number }}
    </div>
  </div>
</template>
<script>
// 首先引入辅助函数
import { mapGetters } from 'vuex'
export default {
  name: 'Home',
  data () {
    return {}
  },
  computed: {
    ...mapGetters([
      'number'
    ])
  }
}
</script>

配置属性mutations:

　　首先，在state定义一个对象，然后在mutations修改这个对象的age:99 修改为age:22

export default new Vuex.Store({
  state: {
    content: {
      name: 'zhangsan',
      age: 99
    }
  },
  mutations: {
    people (state) {
      Object.assign(state.content, { age: 22 })
      console.log(state.content)
    }
  }
})

　　在组件中使用vuex中的mapMutations方法获取vuex中的mutations选项中的方法，再去调用该方法，代码如下

<template>
  <div class="home">
    <div>

    </div>
  </div>
</template>
<script>
// 首先引入辅助函数
import { mapMutations } from 'vuex'
export default {
  name: 'Home',
  created () {
　　//调用这个方法
    this.people()
  },
  methods: {
    ...mapMutations([
      'people'
    ])
  }
}
</script>

效果图如下

　　mutations还可以通过this.$commit直接在组件中调用

　　在vuex中的代码如下

export default new Vuex.Store({
  state: {
    content: {
      name: 'zhangsan',
      age: 99
    }
  },
  getters: {

  },
  mutations: {
    people (state, data) {
      Object.assign(state.content, data)
      console.log(state.content)
    }
  }
})

　　在组件中的代码如下：

export default {
  name: 'Home',
  created () {
    this.$store.commit('people', { age: 18 })
  }
}
</script>

效果图如下：

 

 

 

 

 配置属性actions(异步代码):

　　首先在vuex中初始化一个自己想要的类型变量，代码如下

export default new Vuex.Store({
  state: {
    content: [1, 2, 3, 4]
  }
})

　　然后在vuex中通getters获取到这个类型变量

export default new Vuex.Store({
  state: {
    content: [1, 2, 3, 4]
  },
  getters: {
    getRenderData: state => state.content
  }
})

　　在组件中获取这个类型变量

<template>
  <div class="home">
    <div>
      {{ getRenderData }}
    </div>
  </div>
</template>
<script>
//引入辅助函数
// import { mapGetters } from 'vuex'
export default {
  name: 'Home',
  computed: {
    // 方法一获取
    getRenderData () {
      return this.$store.getters.getRenderData
    }
    // 方法二...mapGetters获取
    // ...mapGetters([
    //   'getRenderData'
    // ])
  },
}
</script>

效果图如下：

在vuex的mutations里面定义一个在actions里面需要被触发的函数，在actions中定义一个函数，代码如下

 mutations: {
    setRenderData (state, data) {
      state.content = data
    }
  },
  actions: {
    changeRenderData ({ commit }, data) {
      setTimeout(() => {
        commit('setRenderData', data)
      }, 3000)
    }
  },

 在组件methods中触发actions定义的这个函数

<template>
  <div class="home">
    <div>
      {{ getRenderData }}
    </div>
  </div>
</template>
<script>
// 引入辅助函数
// import { mapGetters } from 'vuex'
import { mapActions } from 'vuex'
export default {
  name: 'Home',
  data () {
    return {}
  },
  created () {
　　　// 辅助函数触发后的传参方式　
    this.changeRenderData('88888888888888')
  },
  computed: {
    // 方法一获取
    getRenderData () {
      return this.$store.getters.getRenderData
    }
    // 方法二...mapGetters获取
    // ...mapGetters([
    //   'getRenderData'
    // ])
  },
  methods: {
    // 辅助函数调用actions定义的函数，不能直接传参
    ...mapActions([
      'changeRenderData'
    ])
  }
}
</script>

如果不在组件methods中触发actions定义的这个函数，也可以通过this.$store.dispatch,可以直接调用函数，直接传参

export default {
  created () {
    this.$store.dispatch('changeRenderData', '哈哈哈哈哈哈哈')
  },
}
</script>

三秒后，在created钩子函数中触发的actions,效果图如下：

 

 

三秒后，在组件methods中触发actions，效果图如下：