vuex使用示例

Posted 2020-11-03 LLLLily

 

 

 

 

项目代码结构↓

 

src内容↓

 

store内容↓

 

 理解思路: component中的组件发送修改请求，由action.js处理请求，mutation修改请求，修改请求后state改变，从getter.js中可获取更新后的state中的数据。

state.js中为初始数据

const state={
  count:0
};

export default state;

 

action.js中的内容

import * as types from \'./types\';

const actions={
  increment:({
    commit,state
  },payload)=>{
    // alert(payload);
    payload=payload||1;
    commit(types.INCREMENT,payload);
  },
  decrement:({
    commit,state
  })=>{
    commit(types.DECREMENT);
  },
  async:({
    commit,state
  })=>{
    setTimeout(()=>{//请求数据
      commit(types.INCREMENT);
    },1000);
  },
  odd:({
    commit,state
  })=>{
    if(state.count % 2 == 0){
      commit(types.INCREMENT);
    }
  }
};

export default actions;

 

mutation.js的内容

import {
  INCREMENT,
  DECREMENT
} from \'./types\';


const mutations={
  [INCREMENT]:(state,payload)=>{
    // alert(payload);
    payload=payload||1;
    state.count+=payload;
  },
  [DECREMENT]:(state)=>{
    state.count--;
  }
};

export default mutations;

 

type.js的内容

export const INCREMENT=\'INCREMENT\'; //加  描述
export const DECREMENT=\'DECREMENT\'; //减  描述

 

getter.js的内容

const getters={
  count:(state)=>{
    return state.count;
  }
};

export default getters;

 

 

在App.vue(或其他组件)中获取、修改state中的状态↓

<template>
  <div id="app">
    <h1>vuex</h1>
    <input type="button" value="+" @click="increment(2)">
    <input type="button" value="-" @click="decrement">
    <input type="button" value="异步+" @click="async">
    <input type="button" value="偶数+" @click="odd">
    <br/>
    越过getters向state拿：{{$store.state.count}}
    <br/>
    {{count}}/{{count%2==0?\'双数\':\'单数\'}}
    <br/>
    <input type="button" value="修改私有数据" @click="check">
    <br/>
    {{n}}
  </div>
</template>

<script>
  import {mapActions,mapGetters} from \'vuex\';
export default {
  name: \'app\',
  data () {
    return {
      n:0
    }
  },
  methods:{ // 私有方法和 请求并存
    check(){
      this.n=\'bmw\';
    },
    ...mapActions(
      [\'increment\',\'decrement\',\'async\',\'odd\']
    )
  },
  computed:mapGetters(
    [\'count\']
  ),

  mounted(){
    //代码里面直接发请求 actions
//    this.$store.dispatch(\'increment\',121);

    //代码里面直接发请求 mutations
//    this.$store.commit(\'INCREMENT\',[\'apple\',\'banana\',\'orange\',\'西游记\']);

  }
}
</script>

<style>

</style>