vuex

建立vuex基本结构里的五个js模块 state mutation action gettet 

=主文件index.js

  在主文件里引入四大模块 import state/mutations/actions/gettets

引入完之后挂载

 1. 状态文件   state.js    export default{数据:   }//定义数据

2 . 更改状态的方法文件mutations.js  

      第二步在这里引入定义的名字

      import {RECEIVE_ADDRESS,RECEIVE_            CSTEGORYS,RECEIVE_SHOPS} form “./maution_types.js”

      export default{ 

          [RECEIVE_ADDRESS](state,{addres}){

               state.addres=addres

          }

方法名(){}    }

3. 异步操作文件 actions.js之后调用mautions.js方法

     第三步在这里引入mutation_types引入api接口函数，完成之后，调用mautions里的方法，也需要引入名字

    import {RECEIVE_ADDRESS,RECEIVE_ CSTEGORYS,RECEIVE_SHOPS} form “./maution_types.js”

impoer {xxx,xxx,xxx} form “axioa”

     export default{方法名() {}

         //异步获取地址数据，定义一个方法名字

         async getaddres({commit,state}){

             //发请求   const aas=state.aas

             const resolt=await xxx(aas)

              //提交一个mutation

              if(code===0){const addresd=resolt.data;        commit(RECEIVE_ADDRESS,{addres})}

         }

     }

4.action和mutation文件交互的中间连接文件mutation_types.js

   异步操作第一步在这里定义名字

   export const RECEIVE_ADDRESS = “receive_address”   //接收     接口返回的地址

   ecport const RECEIVE_ CSTEGORYS =“receive_categorys”  //接     收接口返回的分类

  export const RECEIVE_SHOPS = “receive_shops”  //接收返回      的商品数据

5.计算属性 gettets.js       

    expory default{属性名(){  }      }

action调用方法:

在组件里调action方法

mounted{this.$store.dispatch(“getaddtes”)}

在组件里调用action的另一种方法，在methods里映射函数方法

引入映射函数 import {mapActions} form “vuex”

在方法里映射成方法  methods{...mapActions([“getaddres”])}

然后在mounted{this.getaddres()}//来调用action里的方法

在组件里读stste数据。在计算属性里映射数据

impory {mapState} from vuex

computed{...mapState([“address”])}

第三步 代码里冒号之后直接用address.name