vuex状态管理应用

<template>
  <div>
    views目录下的页面：vuex状态管理
    <div class="home1">vuex状态中初始值state:</div>
    <div class="home2">{{mobile}}</div>
    
    <div class="home1" @click="changeWay">使用mutations方法改变vuex状态中初始值state中的值，显示在上面一行</div>

    <div class="home1">getter中的对state值进行二次处理：</div>
    <div class="home2">{{mobileother}}</div>

    <div class="home1" @click="changeAgain">在组件中异步action方法改变state中的值</div>
    
  </div>
</template>

<script>
  export default {
    data() {
      return {
        
      };
    },
    // 在组件的computed中使用  vuex
    computed:{
      mobile(){
        return this.$store.state.mobile
      },
      mobileother(){
        return this.$store.getters.getMobile
      }
    },
    methods: {
      //通过提交 mutation 来改变state的状态
      changeWay(){
        this.$store.commit('changeonway',{namezhi:this.mobile})
      },
      changeAgain(){
        // 假装异步
        this.$allAxios(this, 'login', {
          account: '',
          shopcode: '',
          username: '',
          password: ''
        }, (res) => {
          //通过actions异步处理数据
          this.$store.dispatch('changeaction',{list:res.data.data.user_info.account})
        })
      }
    },
  };
</script>

<style scoped>
  .homebg{
    width: 375px;
    background: red;
    font-size: 20px;
    margin: 20px 0;
  }
  .home1{
    font-size: 20px;
    margin-bottom: 20px;
  }
  .home2{
    font-size: 20px;
    margin:10px 0 20px;
    color: salmon;
  }
</style>

store文件夹下的vuex状态文件：

// state.js文件：
const state = {
    mobile: '18303570811',
    vuexnums: 0,
    vuexlist: [],
};

export default state;

// getter.js文件：
const getters = {
    getMobile(state) {
        return state.mobile + '-----哈哈哈';
    }
}

export default getters;

// mutations .js文件：
const mutations = {
    //更新手机号
    changeonway(state, value) {
        console.log(state)
        console.log(value)
        state.mobile = value.namezhi + '加上这几个字，在mutations中改变'
    }
};

export default mutations;

// actions.js文件：
const actions = {

};

export default actions;

// index.js文件：
import Vue from 'vue'
import Vuex from 'vuex'

import state from './state'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'

Vue.use(Vuex)

export default new Vuex.Store({
    state,
    actions,
    getters,
    mutations
})