Vuex進階使用之modules模塊化划分、mapState、mapActions輔助函數的使用

注解：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:{
　　//　在uniapp中寫法，可以直接映射模塊中的login
    ...mapActions(['login']).  //這里引入的是store->modules->login.js中的vuex Actions方法，...mapActions['login']==this.$store.dispatch("login"),mapMutions,mapActions寫在methods中.
　　//在vue中寫法，需要加上模塊名稱，如modules中的login中的login方法，寫法如下
 ...mapActions({'login':'login/login'}).  //指store.dispatch('login/login');

},
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輔助函數的使用。