VueX大致使用

VueX大致使用

npm install vuex@next --save	//先下载xuex

在main.js引用
//引入store
import store from './store'
new Vue({
	store
	render: h => h(App),
})

使用以及引用方式

• 创建store文件夹，创建index.js文件
  
• index.js内容

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import countOptions from './count'		// 引入store的其余js组件
//应用Vuex插件
Vue.use(Vuex)

//创建并暴露store
export default new Vuex.Store({
	modules:{
		countAbout:countOptions // 定义在vue调用时候的调用名
	}
})

• VueX组件（count.js）

//求和相关的配置
export default {
	namespaced:true,
	//准备actions——用于响应组件中的动作
	actions:{
		jiaOdd(context,value){
			console.log('actions中的jiaOdd被调用了')
			if(context.state.sum % 2){
				context.commit('JIA',value)
			}
		}
	},
	//准备mutations——用于操作数据（state）
	mutations:{
		JIA(state,value){
			console.log('mutations中的JIA被调用了')
			state.sum += value
		}
	},
	//准备state——用于存储数据
	state:{
		sum:0, //当前的和
		school:'尚硅谷',
		subject:'前端',
	},
	//准备getters——用于将state中的数据进行加工
	getters:{
		bigSum(state){
			return state.sum*10
		}
	},
}

• 在从components文件夹内的对应.vue的调用方法
  • 方法1
  • commit指向mutations（mutations——用于操作数据（state））
  • dispatch指向actions（actions——用于响应组件中的动作）

methods: {
			increment(){
				this.$store.commit('JIA',this.n)
			}
			incrementOdd(){
				this.$store.dispatch('jiaOdd',this.n)
			}
		},

• 方法2

import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
computed:{
			//借助mapState生成计算属性，从state中读取数据。（数组写法）
			...mapState('countAbout',['sum','school','subject']),
			//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
			...mapGetters('countAbout',['bigSum'])
		},
		methods: {
			//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
			...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
			//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
			...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
		},

• VueX 流程图