vuex

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

• state: 存放公用数据
• mutations：存放store中提供用来改变state中属性的一些函数。
  1.通过commit触发； this.$store.commit('mutation中的函数名'，传给options的参数)
  2.mutations中的函数原则上必须是同步函数
• actions：存放的是一些用来处理异步操作的函数，但是这些函数要修改state中的数据必须通过mutations中的函数。
  actions中的函数通过dispatch触发this.$store.dispatch('action函数名',parm) 。 一般用来设置ajax请求。
• getters：存放了一些函数，就是vuex的计算属性
• modules：划分模块，只有大型项目才会使用。如果模块中的mutations或actions中的属性名与根store中的重复，则都会执行。可以通过在模块中添加属性 namespaced:true,注意在触发mutations或actions中的事件时必须添加相应的模块路径。

modules中只有actions才能拿到rootState和rootGetter. mutations可以借助actions

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let store = new Vuex.Store({
  state: {
    count:100,
    color:'red'
  },
  mutations: {
    addCount(state,options){
      state.count+=options;
    },
    minusCount(state,options){
      state.count-=options;
    },
    changeColor(state,color){
      //此时的color是commit传入的对象{type:'changeColor',col:'blue'}
      state.color=color;
    }
  },
  actions: {
      changeColorAsync(store,options){
        setTimeout(()=>{
          store.commit('changeColor','green')
        },3000)
      }
  },
  modules: {
  },
  //getters中也存放了一些函数，其实就是vuex的计算属性
  getters:{
    type(state){
      return state.count%2===0?'偶数':"奇数"
    }
  }
})
export default store

辅助函数：

• mapState
• mapMutations
• mapActions
• mapGetters

//父组件
<template>
  <div>
    <h1>父组件{{ $store.state.count }}</h1>
    <my-a></my-a>
    <my-b></my-b>
  </div>
</template>
<script>
import a from "./a";
import b from "./b";
export default {
  data() {
    return {};
  },
  components: {
    "my-a": a,
    "my-b": b,
  },
};
</script>
<style lang='less'>
</style>

//子组件a
<template>
  <div>
    <h1>a组件 {{ $store.state.count }}</h1>
    <button @click="minus">减少</button>
  </div>
</template>
<script>
export default {
  name: "my-a",
  data() {
    return {};
  },
  methods:{
      minus(){
          //触发mutation中的changeCount
          this.$store.commit('minusCount',10)
      }
  }
};
</script>
<style lang='less'>
</style>

//子组件b
<template>
  <div>
    <h1 :style="{ color: $store.state.color }">
      b组件{{ mycount }}{{ myCount2 }}
    </h1>
    <p>{{ type }}</p>
    <button @click="add">增加</button>
    <button @click="addCount(5)">增加2</button>
    <button @click="color">改变颜色</button>
    <button @click="changeColorAsync">改变颜色2</button>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex"; //辅助函数
export default {
  data() {
    return {};
  },
  methods: {
    ...mapMutations(["addCount"]),
    ...mapActions(["changeColorAsync"]),
    add() {
      this.$store.commit("addCount", 5);
    },
    color() {
      //   this.$store.commit({
      //       type:'changeColor',
      //       col:'blue'
      //   })
      this.$store.dispatch("changeColorAsync", [1, 22, 3]);
    },
  },
  computed: {
    // type() {
    //   return this.$store.getters.type;
    // },
    // count() {
    //   return this.$store.state.count;
    // },
    // ...mapState(['count']),//只针对组件中要调用的属性名字和store中的属性名字相同时，若不同 则传入对象
    ...mapState({
      mycount: "count",
      myCount2: function (state) {
        return state.count + 100;
      },
    }),
    ...mapGetters(["type"]),
  },
};
</script>
<style lang='less'>
</style>