vuex 各组件demo

vuex.vue

<template>
  <div>
    <span>用户信息：</span>
    <span>{{userInfo}}</span><br>
    <span>用户地址：</span>
    <span>{{address}}</span><br>
    <span>用户部门：</span>
    <span>{{department}}</span>
    <hr>
    <span>{{userDetails}}</span>
    <hr>
    <div style="display:flex;flex-direction:column;justify-content:center;align-items:center;">
      <input type="button" value="one year pass by!" @click="gettingOlder">
      <hr>
      <div>
        <input type="text" placeholder="entry your new name !" v-model="name">
        <input type="button" value="change name !" @click="changeUserName(name)">
      </div>
      <hr>
      <div>
        <input type="text" placeholder="entry a new street name !" v-model="str">
        <input type="button" value="change name !" @click="localFunChangeStrName(str)">
      </div>
      <hr>
      <input type="button" value="action" @click="localActionChangeData">
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  data () {
    return {
      name: '',
      str: ''
    }
  },
  methods: {
    ...mapMutations([
      'gettingOlder',
      'changeUserName'
    ]),
    // 使用传统的commit使用方法
    localFunChangeStrName (streetName) {
      this.$store.commit('changeStreet', streetName)
    },
    // 调用action
    localActionChangeData () {
      this.$store.dispatch('changeData').then(res => {
        console.log(res)
      })
    }
  },
  // state不能跨module注册，action , mutation , getter 可以被映射到根节点直接访问
  computed: {
    ...mapState({
      userInfo: (state) => { return state.localState.userInfo },
      address: (state) => { return state.localState.address },
      department: (state) => { return state.localState.department }
    }),
    ...mapGetters({
      userDetails: 'getUserInfo'
    })
  }
}
</script>
<style lang="less" scoped>
.test {
  justify-content: center;
  align-items: center;
}
</style>

state.js

const localState = {
  state: {
    address: {
      street: '江岸区五福路',
      city: '武汉市',
      country: '中国'
    },
    userInfo: {
      userName: '肖大洋',
      userAge: 31
    },
    department: [
      'development',
      'salor',
      'changeMan'
    ]
  },
  // vuex的同步methods，异步操作需要在action中完成
  mutations: {
    // 没有载荷的mutation
    gettingOlder (state) {
      console.log('gettingOlder')
      state.userInfo.userAge = state.userInfo.userAge + 1
    },
    // 拥有载荷的mutation
    changeUserName (state, payload) {
      console.log('changeUserName')
      state.userInfo.userName = payload
    },
    // 使用type版本的mutation方法在尝试中没有调用成功
    changeStreet (state, payload) {
      console.log('changeStreet')
      state.address.street = payload
    }
  },
  // vuex的计算属性computed => getters
  getters: {
    // 将getUserDepartment作为vuex的过滤器
    getUserDepartment: (state) => {
      state.department.forEach(item => {
        if (item === 'development') {
          return item
        }
      })
      return '没有'
    },
    getUserInfo: (state, getters) => {
      let userInfo = state.userInfo
      let address = state.address
      let department = getters.getUserDepartment
      let obj = { ...userInfo, ...address, department }
      return obj
    }
  },
  // 异步处理动作
  // 实测vue中无法将异步操作的结果通过resolve回传给调用方法的.then()
  actions: {
    // 异步操作
    async changeData ({commit, state}, payload) {
      // 等待数据更新完毕后弹窗
      await new Promise(function (resolve, reject) {
        setTimeout(function () {
          commit('gettingOlder')
          commit('changeUserName', '毛大和')
          commit('changeStreet', '湖北省武汉市')
        }, 3000)
      })
    }
  }
}

export default localState

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import count from './modules/count.js'
import localState from './modules/state.js'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    count,
    localState
  }
})

export default store

猜你喜欢