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的：

 

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: ''
  
})