uniapp集成vuex

本篇文章用最简单的方式讲解uniapp中vuex的使用

目录结构

创建一个store目录，所有vuex模块放入modules中,由index.js统一导出

index.js代码,modules里面每加一个js,这边都需要加入到modules里面

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user
  },
})

export default store

 main.js中导入store,这样就能通过this.$store来使用vuex

import store from './store'
Vue.prototype.$store = store

state,mutations和action

vuex中最重要的三个概念是state,mutations和action,state可以理解为存储变量的地方,如定义一个userInfo来存储用户信息，就需要在state里面定义，mutations是更新变量的地方，如你要改userInfo里面的信息，就需要mutations,action是执行异步操作的地方，如调用接口

我们来看下user.js的代码，里面在state中定义了userInfo来存储用户信息，定义了userInfoMutation来更新用户信息，userInfoAction来调用接口获取用户信息并进行存储

import api from '@/utils/request.js'

const user = {
  namespaced: true,
  // import {mapState,mapMutations,mapActions } from 'vuex'
  //获取state方式,方式1: $store.state.namespace.userInfo
  //方式2 computed中写 ...mapState('namespace', ['userInfo'])
  state: {
    userInfo: null
  },

  //设置state数据,调用方式: $store.commit('namespace/userInfoMutation')
  //方式2 methods中写 ...mapMutations('namespace', ['userInfoMutation'])
  mutations: {
    userInfoMutation: (state, userInfo) => {
      state.userInfo = userInfo
    }
  },

  //action用来执行异步方法,调用方式: $store.dispatch('namespace/userInfoAction')
  //方式2 methods中写...mapActions('namespace', ['userInfoAction'])
  actions: {
    userInfoAction({ commit }) {
      return new Promise(async (resolve, reject) => {
        try {
          //获取用户数据
          const { data } = await api.post({
            url: '/axios/login'
          })
          console.log(data, '调用接口获取用户数据')
          //执行本地commit不需要加namespace
          commit('userInfoMutation', data)
          resolve(data)
        } catch (err) {
          reject()
        }
      })
    }
  }
}

export default user

action的使用

定义完user.js我们就要使用它了，要使用action有两种方式一是直接调用$store.dispatch('namespace/userInfoAction'),其中namespace就是user,二是methods中写...mapActions('namespace', ['userInfoAction']),然后调用userInfoAction

<script>
  import { mapState, mapMutations, mapActions } from 'vuex'
  export default {
    methods: {
      ...mapActions('user', ['userInfoAction']),
      async doAction1() {
        let data = await this.$store.dispatch('user/userInfoAction')
        console.log('登录成功', data)
      },
      async doAction2() {
        let data = await this.userInfoAction()
        console.log('登录成功', data)
      }
    }
  }
</script>

state的使用

state是用来读取数据，可以通过$store.state.user.userInfo来读取，也可以通过computed中写 ...mapState('user', ['userInfo'])来读取

<script>
  import { mapState, mapMutations, mapActions } from 'vuex'
  export default {
    computed: {
      ...mapState('user', ['userInfo'])
    },
    methods: {
      printUserInfo() {
        // 两种读取方式
        console.log(this.userInfo);
        console.log(this.$store.state.user.userInfo)
      }
    }
  }
</script>

mutation的使用

mutation用来变更state的值，也有两种方式,一是调用$store.commit('user/userInfoMutation'),二是在methods中写 ...mapMutations('user', ['userInfoMutation']),然后调用userInfoMutation

<script>
  import { mapState, mapMutations, mapActions } from 'vuex'
  export default {
    methods: {
      ...mapMutations('user', ['userInfoMutation']),
      doMutation1() {
        this.$store.commit('user/userInfoMutation', {
          id: 1,
          name: 'tifa'
        })
      },
      doMutation2() {
        this.userInfoMutation({
          id: 1,
          name: 'anna'
        })
      }
    }
  }
</script>