vue；vuex使用详解

vuex

创建一个vuex

import Vue from 'vue';
import Vuex from 'vuex';
import HomeStore from './homeStore';
import InvitationStore from './invitationStore';

Vue.use(Vuex);

export default new Vuex.Store({
  state:{count:1},
  mutations: {},
  actions: {},
  modules: {
    HomeStore,
    InvitationStore,
  },
});

• state 定义所用的变量值

• mutations 通过commit 派发一个方法改变STATE。只能通过mutations改变state里的变量 。

  用法:

  mutations:{
  	addNum(state){//state state的实例 
  		state.count++
  	}
  	addNum(state,payload){//state state的实例 // payload commit这个方法的参数
  		state.count = payload
  	}
  }
  

• action 异步操作 ，通过调取接口数据，commit一个mutations 改变state

  用法:

  actions里面定义的方法的参数有两种方式，

  一种是通过解构赋值解构出所需要的方法

  commit：派发一个mutations第一个参数就是上面mutations中定义的方法，第二个参数就是

  传入接口数据。传给了上面mutations中的payload参数。通过mutations获取到接口数据改

  state

  tootState 可以访问state里面的定义的变量 。 也挺好用。只不过只能获取。不能直接在actions中改变state中变量的值。

  context 上下文跟上面一样 只不过上面的属性从context中解构出来。不解构的话通过点语法也是可以使用context上下文中的方法

  actions:{
  addNumAsync({commit,rootState}){
  	axios.get(xxxx).then(res=>{
  		commit('addNum',res)
  	})
  },
  addNumAsync(context){
  	axios.get(xxxx).then(res=>{
  		context.commit('addNum',res)
  	})
  }
  }
  

• modules 模块拆分，通过定义的js文件导入到vuex中。

  export default{
  	namespaced:true//创建一个独立的命名空间，必须要加上
  	其他等同于vuex
  }
  // vuex index.js
  import InvitationStore from './invitationStore';
   modules: {
      InvitationStore,
    },
  // 这样一个模块就导入到了vuex中了
  

  代码示范

  直接在vue文件中访问实例

<template>
<div>{{$store.state.count}}</div>//访问vuex中定义的state中的变量
<div @click="clickHandle"></div>
</template>
methods:{
clickHandle(){
this.$store.commit('addNum',1)// 访问vuex中定义的mutations中的方法
this.$store.dispatch('addNumAsync') //访问vuex中定义的actions中的异步方法
}
}

模块拆分的用法

mapState

在vue computed计算属性使用

mapMutations mapActions

在vue methods中使用

<template>
<div>{{count}}</div>//访问下面computed中数组的state变量
<div @click="addNum"></div>
<div @click='addNumAsync'></div>
</template>
import { mapState,mapMutations,mapActions } 'vuex' // 先引入vuex中的辅助方法
methods:{
	...mapMutations('InvitationStore',['addNum'])// 第一个参数是在vuex中modules注册的名字，命名空间。第二个使用数组的方式把所需要的的模块中定义的方法可以拿过来。不用再methods里面定义直接使用。
	, ...mapActions('InvitationStore',['addNumAsync'])// mapactions的用法。同上
}，
computed:{
...mapState('InvitationStore',['count','a','b'])// 第一个参数是在vuex中modules注册的名字，命名空间。第二个使用数组的方式把所需要的的state中定义的变量可以拿过来。不用再data里面定义直接使用。
}

这样一个简单的vuex vuex模块拆分就是这样使用的。改变state只能在mutations里面改变

actions 也只能通过commit一个mutations 改变state 。只需要把调取接口的数据传递给mutations中的第二个参数中。改变state。