vuex辅助函数以及模块化

Posted 2023-04-25

参考技术A /* 导出vuex中的mapState,mapGetters,mapMutations,mapActions方法 */

computed:

    /* 利用mapState方法使用拓展运算符把list,getDazhuan解构在计算属性中 */

    ...mapState(lista:'list')       /



methods:

      /* this.$store.cpmmit('DELNUM',this.num) */

    /* 利用mapActions方法使用拓展运算符吧actions的方法解析在methods中 ，在this中也可以找到对应解析出来的方法 */

      /* this.$store.dispatch('addajax',this.num) */



在store目录下创建modules文件夹，创建modA.js文件。

/* 箭头函数如果需要返回对象，需要使用()包一下 */

const state=()=>(

    modaStr:'我是模块A的数据'

  )

const getters=

  strGetter(state)

    return state.modaStr+'getter'

 

 

const mutations=

  CHANGESTRA(state,payload)

    state.modaStr=payload

 

 

const actions=

  waitStr(commit,data)

    setTimeout(() =>

      commit('CHANGESTRA',data)

    , 1500);

 

 

  export default

    state,

    getters,

    mutations,

    actions

 

index.js文件中导入文件    import modA from '@/store/modules/modA'

模块化                               modules:          modA: modA,         

mapState           <h1>$store.state.modA.modaStr</h1>

mapGetters        <h1>$store.getters['modA/strGetter']</h1>

                                  methods:

mapMutations                  this.$store.commit('modA/CHANGESTRA','后来的我们没有走到一起')

mapActions                      this.$store.dispatch('modA/waitStr','异步处理完成')            
                                                                             

Vuex进阶使用之modules模块化划分mapStatemapActions辅助函数的使用

注解：vuex是一个很简单、很方便的技术，入门很简单，这里给大家详细介绍下vuex的进阶使用。

一、vuex模块化modules

1、项目根目录新建一个sotre文件夹，在store文件夹内，新建两个文件（一个文件，一个文件夹），一个index.js文件，一个modules文件夹。

 

目录结构：

store

　　index.js    --文件

　　modules   --文件夹

 

2、store->index.js

import Vue from ‘vue‘
import Vuex from ‘vuex‘

import  modules from ‘./modules‘
Vue.use(Vuex)

export default new Vuex.Store({
  state: {

  },
  mutations: {
  },
  actions: {
  },
  modules:modules.   //注意哦，后一个modules文件夹中有index.js文件，所以可以直接写文件夹名，前端中文件夹中有index.js 可以只写文件夹名(默认引入文件夹中的index.js)
})

 3、store->modules

 

目录结构

store

　　index.js

　　modules

　　　　index.js  //将所有模块引入一个js文件，统一导出，store->index.js中就只需要引入modules,类似modules->index.js

　　　　cart.js  //购物车模块

　　　　login.js //登陆模块

 

4、具体模块写法，cart.js

//cart.js
const state={
   cart:"one-sotre"
}
const actions={
    cart({commit},data){
        commit("cart",data)
    }
};
const mutations={
    cart(state,data){

        state.cart=data;
    }
}
export  default {
    state,
    actions,
    mutations
}

 

5、将store->modules->[cart.js,login.js]导入store->modules->index.js中，统一处理导出

 

//store->modules->index.js
import login from ‘./login‘;
import cart from ‘./cart‘;
export default{
  login,        //键值相同时,login:login==login
  cart    
}

 

6、在store->index.js中使用导出[login,cart]模块

import Vue from ‘vue‘
import Vuex from ‘vuex‘

import  modules from ‘./modules‘.   //简写，引入modules/index.js
Vue.use(Vuex)

export default new Vuex.Store({
  state: {

  },
  mutations: {
  },
  actions: {
  },
  modules:modules
})

 在main.js中引入即可。

 

7、vue components组件中使用

//使用vuex中的函数mapState、mapAction,需要注意mapState、mapGetter这两个需要数据实时更新的书写在computed计算属性中，mapAction等方法写在methods方法中。

//.vue,这里只讲两个方法，mapState和mapAction，mapState和[mapGetters,mapMutions,mapActions]写法可以简单分为两种，所以介绍两种写法.
<script>
import {
		mapState,
		mapActions
	} from ‘vuex‘
export default{
    mounted(){
    this.login("true");  //调用mapActions[‘login‘];
    console.log(this.login) //调用..mapState({login:state=>state.login.login})
},
    methods:{
    ...mapActions[‘login‘].  //这里引入的是store->modules->login.js中的vuex Actions方法，...mapActions[‘login‘]==this.$store.dispatch("login"),mapMutions,mapActions写在methods中.
},
computed{
    ...mapState({login:state=>state.login.login}) //这里引入的是store->modules->login.js中的state数据,...mapState({login:state=>state.login.login})==this.state.login.login;mapState,mapGetters写在computed中，跟computed自身属性有关.
}
}
</script>

 

//这个文档聚集了modules 模块化写法,vuex基础用法，mapState、mapGetters辅助函数的使用。