Vuex学习笔记

Vuex学习笔记

前言

提示：小白学习前端，Vuex学习笔记，如有错误，感谢各位大神批评指正！

---

一、引入Vuex

1. 安装Vuex
2. 在main.js中引入
3. 新建store/index.js，并进行相关配置

1.安装Vuex

npm install vuex --save

2.在main.js中引入

import store form './store'
new Vue({
	store
})

3.在store新建index.js，配置actions、mutations、state、getters

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

Vue.use(Vuex)   //vuex是插件，所以需要使用use引入

const actions = {
//如果函数执行有一些其他的逻辑，也可以写在store中
  add(context,number){
    setTimeout(()=>{
      context.commit('ADD',number)
    },500)
  },
  dec(context,number){
    context.commit('DEC',number)
  }
}
const mutations = {
  ADD(state,number){
    state.number+=number
  },
  DEC(state,number){
    state.number-=number
  }
}
const state = {
  school:'DLUT',
  student:'XIAOHAN',
  number:111,
}
//可以认为是state的计算属性
const getters = {
  bigNumber(state){
    return state.number * 10
  }
}

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

二、Vuex基本使用

1.直接使用

<template>
  <div class="count">
    <h3>学校：{{$store.state.school}}</h3>     //逻辑复杂
      <button @click="add()">学号++</button>
    <h3>学号*10：{{$store.getters.bigNumber}}</h3>
  </div>
</template>
<script>
export default{
	data(){
      return {
        n:0
      }
    },
	methods:{
	//手动生成方法
		add(){
			this.$store.dispatch('add',this.n)
		},
	}
}
</script>

以上方式需要手动生成方法，并且DOM结构里的逻辑比较复杂。

2.利用mapState,mapGetters读取数据

手动配置、数组写法、对象写法

<template>
  <div class="count">
    <h3>学校：{{school1}}</h3>
    <h3>学生：{{student}}</h3>
    <h3>学号：{{number}}
      <input type="text" v-model.number="n">
      <button @click="add(n)">学号++</button>
      <button @click="DEC(n)">学号--</button>
    </h3>
    <h3>学号*10：{{bigNumber}}</h3>
  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default{
  computed:{
    //方式一：程序员手动配置，繁琐。
      school(){
        return this.$store.state.school
      },
      student(){
        return this.$store.state.student
      },
      number(){
        return this.$store.state.number
      },
    // 方式二：数组写法，
    // 最简便的写法，但是要求组件中使用的名字和store中的名字必须一致
    ...mapState(['school','student','number']),
    //方式三：对象写法
    // 更灵活，school可以配置成其他名字school1
    ...mapState({school1:'school',student:'student',number:'number'}),
    
    // 从getters中获取数据，方式一致，只不过换了个api
      // bigNumber(){
      //   return this.$store.getters.bigNumber
      // }
      ...mapGetters(['bigNumber'])
  }
}
</script>

3.利用mapMutations,mapActions生成方法

<div>
    <h3>学号：{{number}}
      <input type="text" v-model.number="n">
      <button @click="add(n)">学号++</button>   //传参
      <button @click="DEC(n)">学号--</button>
    </h3>
</div>
  //手动生成方法
      add(){
        this.$store.dispatch('add',this.n)
      },

      // mapActions生成方法   对象写法   需要在函数调用的时候传参
      ...mapActions({add:'add'}),
      // mapActions生成方法   数组写法   需要在函数调用的时候传参
      ...mapActions(['add']),

      //如果没有特殊需求，可以越过actions的dispatch环节，直接调用commit
      //1.手动生成函数
      dec(){
        this.$store.commit('DEC',this.n)
      },
      //2.mapActions生成方法   对象写法   需要在函数调用的时候传参
      ...mapMutations({DEC:'DEC'}),
      //3.mapActions生成方法   数组写法   需要在函数调用的时候传参
      ...mapMutations(['DEC']),

三、Vuex分模块配置

1.store/index.js配置

store/index.js文件中，不同模块分别配置，每个模块中都可配置actions、mutations、state、getters，并且必须要配置 namespaced：true

import Vue from "vue";
import Vuex from 'vuex'
Vue.use(Vuex)

//part1所有的vuex配置
const PartOneOptions = {
  namespaced:true,//方便在组件内调用
  actions:{

  },
  mutations:{

  },
  state:{
    school:'DLUT',
    student:'XIAOHAN',
  },
  getters:{}
}
//part2所有的vuex配置
const PartTwoOptions = {
  namespaced:true,
  actions:{
    add(context,number){
      setTimeout(()=>{
        context.commit('ADD',number)
      },500)
    },
    dec(context,number){
      context.commit('DEC',number)
    }
  },
  mutations:{
    ADD(state,number){
      console.log('ADD被执行了',state)
      state.number+=number
    },
    DEC(state,number){
      state.number-=number
    }
  },
  state:{
    number:111,
  },
  getters:{
    bigNumber(state){
      return state.number * 10
    }
  }
}

export default new Vuex.Store({
  modules:{
    PartOneOptions,
    PartTwoOptions
  }
})

2.组件内引入

由于给vuex分成了不同的模块，所以引入时，也有所不同。

methods:{
	...mapActions('PartTwoOptions',['add']), //数组写法
	...mapMutations('PartTwoOptions',{DEC:'DEC'}),//对象写法
}
computed:{
//利用辅助函数
	//state中的数据
	...mapState('PartTwoOptions',{number:'number'}),//对象写法
	//getters中的数据
	...mapGetters('PartTwoOptions',['bigNumber'])//数组写法
	//调用aitions
	...mapActions('PartTwoOptions',['add']),
	//调用mutation
	...mapMutations('PartTwoOptions',{DEC:'DEC'}),
//手写：
	// 利用计算属性return
	return this.$store.state.PartTwoOptions.number
	return this.$store.getters['PartTwoOptions/bigNumber']
	// methods
	this.$store.commit('PartTwoOptions/add',参数)
	this.$store.dispatch('PartTwoOptions/DEC',参数)
}