VUE_vue中如何使用状态管理（store，vuex），mapState辅助函数使用，mapMutations辅助函数使用

系统管理员 2022-12-27 01:53 134阅读 0赞

### vuex的基础使用 ###

安装vuex

npm install vuex --save
    //或者
    yarn add vuex （推荐使用）

main.js

import Vue from 'vue'
    import store from './store'
    new Vue({ 
      store,
    }).$mount('#app')

src/store/index.js （无该文件则自己新建）

import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    export default new Vuex.Store({ 
      state: { 
    	  msg:"小歪"
      },
      mutations: { },
      actions: { },
      modules: { }
    })

组件使用：  
.html

<h1>{
       {this.$store.state.msg}}</h1>

.js

console.log(this.$store.state.msg)

##### store使用辅助函数： #####

.js

.html

### mutations使用介绍（全局方法） ###

export default new Vuex.Store({ 
      state: { 
    	  count:0
      },
      mutations: { 
    	 add(state){ 
    		state.count = state.count+1
    	}
      },
      actions: { },
      modules: { }
    })

组件调用mutations方法：

methods:{ 
    	countadd(){ 
    		this.$store.commit('add')
    	}
    }

##### mutations使用辅助函数： #####

import { mapMutations} from 'vuex'
    export default new Vuex.Store({ 
      state: { 
    	  count:0
      },
      mutations: { 
    	 add(state){ 
    		state.count = state.count+1
    	}
      },
      actions: { },
      modules: { }
    })

组件调用mutations方法：

methods:{ 
    	// 使用mutations辅助函数,使用对象方式时，名称可以不一致
    	...mapMutations({ 
    	 	muCountAdd:'add'
    	}),
    	//调用 this.muCountAdd()
    }