vuex5大核心模块的使用

目录

1、state----存储状态

2、mutation----唯一修改状态的地方（同步代码）

mapMutations辅助函数

mapState辅助函数

3、actions ---- 存放异步逻辑

4、getters--计算属性

mapActions辅助函数

mapGetters辅助函数

5、modules--模块

---

vuex 专门为vue.js设计的状态管理工具，管理多个组件共享的状态，适合中大型项目，项目组件关系比较简单，用vuex反而增加复杂度

1、state----存储状态

state:{
	count:0,
	uname:'zs'
}

组件

<p>{{ $store.state.count }}</p>

2、mutation----唯一修改状态的地方（同步代码）

声明

//2.mutations 修改状态
mutations:{
changeCount(state,num){
    //第一个参数state.第二个参数接受外界传来的参数
    //同步逻辑
    state.count +=num
    
	}
}

组件中使用

<button @click="changeCount">修改count值</button>

组件中提交mutation

this.$store.commit('mutaionName',参数)

methods:{
    changeCount(num){
        //调用vuex中的mutation方法
        this.$store.commit('chagneCount',num)
        
        //直接修改状态可以，但是不推荐,原因通过mutation改状态方便调试工具追踪
        //开发中为了直接修改给我们一个报错提示,开启严格模式
        //this.$store.state.count++
	}
}

直接修改状态可以，但是不推荐,原因通过mutation改状态方便调试工具追踪

this.$store.state.count++

开启严格模式会报错

// vuex代码
import Vue from 'vue'
import Vuex from 'vuex'
// 注册
Vue.use(Vuex)
// 创建store实例
const store = new Vuex.Store({
  strict: true, // 开启严格模式
  // 1.state 存储状态
  state: {
    count: 0,
    name: 'zs'
  },
  mutations: {
    changeCount (state, num) {
      state.count += num
    }

  }
})
// 导出store实例
export default store

开发中为了直接修改给我们一个报错提示,开启严格模式,开发完（上线）要去掉，否则会耗性能

mapMutations辅助函数

1.按需导入:import {mapMutations} from 'vuex'

2.methods:{...mapMutations(['changeCount'])}

//辅助函数
import {mapMutations} from 'vuex'
export default{
    methods:{
        ...mapMutations(['changeCount'])
    }
}

      

<button @click="changeCount(6)">修改count值</button>

修改方法名

//想修改方法名，可以写成对象形式
methods:{
     ...mapMutations({
         // changeCount2( ) { this.$store.commit ( ' changeCount ' )}
         //新方法名:'具体mutation'
		changeCount2: 'changeCount ' ,
       changeUname: 'changeUname'
     })
}

mapState辅助函数

按需导入

import {mapState} from 'vuex'
export default{
    computed:{
        ...mapState(['count'])
    }
}

使用

<p>{{count }}</p>

3、actions ---- 存放异步逻辑

提供了commit、dispatch

调用:this.$store.dispatch('getData')

// vuex代码
import Vue from 'vue'
import Vuex from 'vuex'
// 注册
Vue.use(Vuex)
// 创建store实例
const store = new Vuex.Store({
  strict: true, // 开启严格模式
  // 1.state 存储状态
  state: {
    count: 0,
    name: 'zs',
    list: []
  },
  mutations: {
    changeCount (state, num) {
      state.count += num
    },
    changeName (state, newName) {
      state.name = newName
    },
    changeList (state, list) {
      state.list = list
    }

  },
  actions: {
    // 第一个参数context,上下文
    getData (context) {
      // 模拟异步
      setTimeout(() => {
        // 调用mutation去改状态
        const list = [
          {
            id: 1,
            name: 'zs',
            gender: '男'
          },
          {
            id: 2,
            name: 'lis',
            gender: '男'
          }
        ]
        context.commit('changeList', list)
      }, 2000)
    }

  }
})
// 导出store实例
export default store

actions放异步逻辑，mutation放同步代码

mutation 放同步

组件中调用

 methods: {
    getData () {
      // 调用vuex的actions方法
      this.$store.dispatch('getData')
    }
  }

使用

<button @click="getData">异步获取数据</button>

context是触发mutations的

4、getters--计算属性

//类似于计算属性
getters:{
    //第一个参数 state,第二个参数getters
    toUpperCase(state,getters){
          console.log(state, getters.a)
      return state.name.toUpperCase()
        
    },
    a () {
      return 100
    }
    
}

使用

<p>vuex的计算属性{{ $store.getters.toUpperCase }}</p>

mapActions辅助函数

导入

import {mapActions} from 'vuex'

使用

methods:{
...mapActions(['getData'])
}

mapGetters辅助函数

import {mapGetters} from 'vuex'

使用

computed:{
    ...mapGetters(['toUpperCase'])
}

5、modules--模块

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

Vue.use(Vuex)

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