[JavaScript知识库]vuex中辅助函数写法

什么是vuex

vuex是一种集中管理的状态管理工具，可以用于大型项目的状态管理，比如购物车，登录，权限，收货地址等
一般我们派发dispatch一个actions名字，然后actions去commit提交一个mutations名字，mutations去修改mutate这个state名字,
getters类似于vue中的computed的计算属性，而modules可以为store划分不同的业务模块

vuex的核心

state & mutations & actions & getters & modules 是vuex的五个核心

常规vuex的写法

1: 安装install

 yarn add vuex
 

2: 新建store文件夹，新建index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let state = {
  name: '张三'
}
let getters = {
  getName(state) {
    return state.name
  }
}
let mutations = {
  setName(state,name) {
    state.name = name
  },
  toggleName(state,name) {
    state.name = name == '张三' ? '李四' : '张三'
    console.log("state.name",state.name);
  }
}
let actions = {
  actionName({commit},{name}) {
    commit("setName",name)
  }
}

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
})

 

3: app.vue

<template>
  <div id="app">
    姓名: state中的 {{name}} <br/>
    姓名: getters中的 {{name1}}
    <button @click="mutateName"> 修改姓名 </button>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {},
  data() {
    return {}
  },
  computed:{
    name() {
      return this.$store.state.name
    },
    name1() {
      return this.$store.getters.getName
    }
  },
  methods: {
    mutateName() {
      this.$store.commit("toggleName",this.name)
      // dispatch actions名字
      // this.$store.dispatch("actionName",{name: this.name})
    }
  }
}
</script>

vuex辅助函数的写法

1: 数组的写法 (注意mapMutations和mapActions也可以当做点击事件的方法直接使用)

<template>
  <div id="app">
    姓名: state中的 {{name}} <br/>
    姓名: getters中的 {{getName}}
    <!-- <button @click="mutateName"> 修改姓名 </button> -->
    <!-- <button @click="setName('李四')"> 修改姓名 </button> -->
    <button @click="actionName({name: '李四'})"> 修改姓名 </button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: 'App',
  components: {},
  data() {
    return {}
  },
  computed:{
    ...mapState(["name"]),
    ...mapGetters(["getName"])
  },
  methods: {
    // mapMutations和mapActions也可以当作点击事件方法直接使用
    ...mapMutations(["setName"]),
    ...mapActions(["actionName"]),
    // mutateName() {
    //   let name = "李四"
    //   // this.setName(name)
    //   this.actionName({name})
    // }
  }
}
</script>

2：对象的写法

<template>
  <div id="app">
    姓名: state中的 {{customName}} <br/>
    姓名: getters中的 {{customGetName}}
    <button @click="mutateName"> 修改姓名 </button>
  
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: 'App',
  components: {},
  data() {
    return {}
  },
  computed:{
    // 使用对象方式时，名称可以不一致
    ...mapState({
      customName: 'name'
    }),
    // 使用对象方式时，名称可以不一致
    ...mapGetters({
      customGetName: 'getName'
    })
  },
  methods: {
    // 使用对象方式时，名称可以不一致
    ...mapMutations({
      setName1: 'setName'
    }),
 // 使用对象方式时，名称可以不一致
    ...mapActions({
      actionName1: 'actionName'
    }),
    mutateName() {
      let name = "李四"
      // this.setName1(name)
      this.actionName1({name})
    }
  }
}
</script>

关于vuex模块下的辅助函数写法

• 新建modules文件夹，新建user.js

export default {
  namespaced: true,
  state: {
    name: '张三'
  },
  mutations: {
    getName(state) {
      return state.name
    }
  },
  getters: {
    setName(state,name) {
      state.name = name
    },
  },
  actions: {
    actionName({commit},{name}) {
      commit("setName",name)
    }
  },
}

• store下的index.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
Vue.use(Vuex)
export default new Vuex.Store({
  user
})

1: 数组的写法

<template>
  <div id="app">
    姓名: state中的 {{name1}} <br/>
    姓名: getters中的 {{getName}}
    <button @click="mutateName"> 修改姓名 </button>
  
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  components: {},
  data() {
    return {}
  },
  computed:{
    ...mapState("user",["name"]),
    ...mapGetters("user",["getName"])
  },
  methods: {
    ...mapMutations("user",["setName"]),
    ...mapActions("user",["actionName"]),
    mutateName() {
      let name = "李四"
      // this.setName(name)
      this.actionName({name})
    }
  }
}
</script>

2: 对象的写法

<template>
  <div id="app">
    姓名: state中的 {{name1}} <br/>
    姓名: getters中的 {{getName}}
    <button @click="mutateName"> 修改姓名 </button>
  
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  components: {},
  data() {
    return {}
  },
  computed:{
    //  这个也是兼容在uniapp中的写法
    ...mapState({ 
      name1: state => state.user.name
    }),
    // 正常我们这样写，但是uniapp不支持
    ...mapState({ 
      name1: "name"
    }),
    // 使用对象方式时，名称可以不一致
    ...mapGetters("user",{
      getName: "getName"
    })
  },
  methods: {
    ...mapMutations("user",{
      setName: "setName"
    }),
    ...mapActions("user",{
      actionName: "actionName"
    }),
    mutateName() {
      let name = "李四"
      // this.setName(name)
      this.actionName({name})
    }
  }
}
</script>