vue的state, getters, mutations, actions, modules详解

先安装Vuex 后面必须得用--save因为生产环境需要用到

npm install vuex --save

然后里新建个store 下面新建个index

然后得在main.js里面导入一下，如下图：

store 里面的num.js 和str.js用的module来写的demo里面没啥东西

我们再看一下在模板里面怎么写的

效果图：

源码：index.vue的：

<template>
  <div>
  	<!--//很多时候 , $store.state.dialog.show 、$store.dispatch('switch_dialog') 
//以上写法又长又臭 , 很不方便 , 我们没使用 vuex的时候 , 获取一个状态只需要 this.show 
//执行一个方法只需要 this.switch_dialog 就行了 , 使用 vuex 使写法变复杂了 ?
//使用 mapState、mapGetters、mapActions 就不会这么复杂了。
//mapGetters、mapActions 和 mapState 类似 ,
//mapGetters 一般也写在 computed 中 , mapActions 一般写在 methods 中。-->
  	<h1>Vuex</h1>
     <h1>$store.state.num_store.age:{{$store.state.num_store.age}}</h1>
     <h1>$store.state.num_store.num:{{$store.state.num_store.num}}</h1>
     <h1>$store.state.str_store.name：{{$store.state.str_store.name}}</h1>
     <h1>$store.state.src:{{$store.state.src}}</h1>
     <h1>$store.state.show:{{$store.state.show}}</h1>
     <h1>computed计算属性来获取到相反状态::{{not_show}}</h1>
     <h1>用vuex的getters来获取到相反状态::{{$store.getters.not_show}}</h1>
     <h1>用mapState来获取到show的正确状态::{{showa}}</h1>
     <h1>用mapState来获取moundle里面num_store的num::{{numa}}</h1>
     <h1 >用mapGetter获取相反的show：：：{{abcd}}</h1><br />
     <button @click="$store.commit('qian')">用mutation改变</button><br /><br /><br />
     <br />
     <button @click="$store.dispatch('qian')">用action改变mutation里面多个的方法</button><br />   
     <br />
     <button @click="abc()">用mapActions改变mutation里面多个方法</button><br />
     <br />
     <router-link to='/jing'> songmeijing</router-link>
     <router-link to='/qian'> yaohuiqina</router-link>
  </div>
</template>
<script>
import {mapState} from 'vuex'
import {mapGetters} from 'vuex'
import {mapActions} from 'vuex'
  export default {
    name: "",
    data() {return {}},
    //组件
    components:{},
    //计算属性
    computed: {
    	not_show(){
        return !this.$store.state.show
      },
      ...mapState({
      	showa:state=>state.show,
      	numa:state=>state.num_store.num
      }),
       ...mapGetters({
    		abcd:'not_show'
    	})
    
   },
   //方法
    methods: {//用abc来调用mutation里面的qian。原生：this.$store.dispatch('qian')
       ...mapActions({
       	abc:'qian'
       })
      
    },
    //页面初始化所需的数据
    created() {
    	console.log("12")
       console.log(this.$store.state.num)
    },
    //钩子函数
    mounted() {
     
    }
  }
</script>

<style lang="less" scoped>



</style>

store index.js的源码：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import num from './num.js'
import str from './str.js'

export default new Vuex.Store({
	state:{
		src:'yuanshi',
		show:false
	},
    modules:{
        num_store:num,
        str_store:str
    },
    mutations:{//使用 $store.commit('qian') 来触发 mutations 中的qian 方法
    	qian(state){//这里面的state对应着上面这个state
    		state.src = '大王',		
    		state.show = state.show?false:true,
    		state.num_store.age = 19		
    	},
    	qiana(state){
    		state.str_store.name = '小王'		
    	},
    	addNum(state){
    		state.num_store.num ++		
    	}
   },
   actions:{
     	qian(context){//这里的context和我们使用的$store拥有相同的对象和方法
     		context.commit('qian');
     		context.commit('qiana');
     		context.commit('addNum');
     	}
   },
   getters:{//如果要使用下面的not_show.需要在模板中使用$store.getters.not_show
   	  not_show(state){//这里的state就是对应的是上面的state
   	  	return !state.show
   	  }
   }
})

num.js

export default {
    state:{
        num:520,
        age:18
    }
}

str.js

export default{
	state:{
		name:"yaohuiqian"
	}
}

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
	
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
  
})

vue的state, getters, mutations, actions, modules详解

猜你喜欢