vuex 应用模板

电玩女神 2021-07-24 12:05 333阅读 0赞

**actions.js中的请求数据方法,越早调用越好,比如在App.vue中的生命周期函**数中调用  
1、安装

cnpm install vuex --save

2、src下创建store文件夹，在store文件夹下创建index.js

3、将主入口index.js文件挂载到vue实例,在main.js中

import store from './store'
    
    new Vue({ 
      el: '#app',
      router,
      store,
      components: {  App },
      template: '<App/>'
    })

4、在index.js中引入vue和vuex,并将各个模块内容按文件划分引入

import Vue from 'vue'
    import Vuex from 'vuex'
    
    import state from './state.js'
    import actions from './actions.js'
    import mutations from './mutations.js'
    import getters from './getters.js'
    
    Vue.use(Vuex);
    
    export default new Vuex.Store({ 
      state,
      mutations,
      actions,
      getters
    })

5、创建state.js文件,并添加项目需要的state状态

export default{ 
      address:"", //地址
      categorys:[],//食品分类
      shops:[],//商家
    }

6、创建mutation-types.js文件,用于定义修改state状态的方法的常量名称

export const RECEIVE_ADDRESS='receive_address' //地址
    export const RECEIVE_CATEGORYS='receive_categorys' //分类
    export const RECEIVE_SHOPS='receive_shops' //商家

7、创建mutations.js文件,根据mutation-types.js中的常量名,定义修改state状态的方法

import { 
      RECEIVE_ADDRESS,
      RECEIVE_CATEGORYS,
      RECEIVE_SHOPS
    } from './mutation-types'
    
    export default{ 
      [RECEIVE_ADDRESS](state,{ address}){  //state为自带参数
        state.address=address;
      },
      [RECEIVE_CATEGORYS](state,{ categorys}){ 
        state.categorys=categorys;
      },
      [RECEIVE_SHOPS](state,{ shops}){ 
        state.shops=shops;
      },
    
    }

8、创建actions.js文件,用于异步请求数据,并通过mutations.js中的方法修改state状态

import { 
      RECEIVE_ADDRESS,
      RECEIVE_CATEGORYS,
      RECEIVE_SHOPS
    } from './mutation-types'
    
    import axios from 'axios';
    
    export default{ 
      //异步获取地址
      getAddress({ commit,state},url){   //commit、state为自带参数,url为传入参数
    
            axios.get(url).then((res)=>{ 
              let address=res.data;
              commit(RECEIVE_ADDRESS,{ address});//调用mutations.js内的方法
            })
        }
      ,
      //异步获取食品分类
      getCategorys({ commit,state},url){ 
    
            axios.get(url).then((res)=>{ 
              let categorys=res.data;
              commit(RECEIVE_CATEGORYS,{ categorys});
            })
    
      },
      //异步获取商家列表
      getShops({ commit,state},url){ 
    
            axios.get(url).then((res)=>{ 
              let shops=res.data;
              commit(RECEIVE_SHOPS,{ shops});
            })
    
      }
    
    }

9、创建getters.js文件夹,用于计算属性方法

export default{ 
      get(state) //state为自带参数
      { 
        return state.address;
      }
    }

10、使用

(1)方式一
    		this.$store.xxx
    	(2)方式二
    		import { mapxxx} from 'vuex';	
    		在对应区域解构