专栏首页前端社区Vuex基本使用的总结

Vuex基本使用的总结

使用

在 Vue 的单页面应用中使用,需要使用Vue.use(Vuex)调用插件。 使用非常简单,只需要将其注入到Vue根实例中。

import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0
  },
getter: {
    doneTodos: (state, getters) => {
      return state.todos.filter(todo => todo.done)
    }
  },
  mutations: {
    increment (state, payload) {
      state.count++
    }
  },
actions: {
  addCount(context) {
    // 可以包含异步操作
    // context 是一个与 store 实例具有相同方法和属性的 context 对象
  }
}
})
// 注入到根实例
new Vue({
  el: '#app',
  store,
  template: '<App/>',
  components: { App }
})

然后改变状态:

this.$store.commit('increment')

Vuex 主要有四部分:

  1. state:包含了store中存储的各个状态。
  2. getter: 类似于 Vue 中的计算属性,根据其他 getter 或 state 计算返回值。
  3. mutation: 一组方法,是改变store中状态的执行者。
  4. action: 一组方法,其中可以含有异步操作。

state

Vuex 使用 state来存储应用中需要共享的状态。为了能让 Vue 组件在 state更改后也随着更改,需要基于state创建计算属性。

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count  // count 为某个状态
    }
  }
}

getters

类似于 Vue 中的 计算属性,可以在所以来的其他 state 或者 getter 改变后自动改变。 每个getter方法接受 state和其他getters作为前两个参数。

getters: {
    doneTodos: (state, getters) => {
      return state.todos.filter(todo => todo.done)
    }
  }

mutations

前面两个都是状态值本身,mutations才是改变状态的执行者。mutations用于同步地更改状态

// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}

其中,第一个参数是state,后面的其他参数是发起mutation时传入的参数。

this.$store.commit('increment', 10)

commit方法的第一个参数是要发起的mutation名称,后面的参数均当做额外数据传入mutation定义的方法中。 规范的发起mutation的方式如下:

store.commit({
  type: 'increment',
  amount: 10   //这是额外的参数
})

额外的参数会封装进一个对象,作为第二个参数传入mutation定义的方法中。

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

actions

想要异步地更改状态,需要使用actionaction并不直接改变state,而是发起mutation

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

发起action的方法形式和发起mutation一样,只是换了个名字dispatch

// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

action处理异步的正确使用方式

想要使用action处理异步工作很简单,只需要将异步操作放到action中执行(如上面代码中的setTimeout)。 要想在异步操作完成后继续进行相应的流程操作,有两种方式:

  1. action返回一个 promise。 而dispatch方法的本质也就是返回相应的action的执行结果。所以dispatch也返回一个promise
store.dispatch('actionA').then(() => {
// ...
})
  1. 利用async/await。代码更加简洁。
// 假设 getData() 和 getOtherData() 返回的是 Promise

actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

各个功能与 Vue 组件结合

stategetter结合进组件需要使用计算属性:

computed: {
    count () {
      return this.$store.state.count 
      // 或者 return this.$store.getter.count2
    }
  }

mutationaction结合进组件需要在methods中调用this.$store.commit()或者this.$store.commit():

methods: {
    changeDate () {
        this.$store.commit('change');
    },
    changeDateAsync () {
        this.$store.commit('changeAsync');
    }
}

为了简便起见,Vuex 提供了四个方法用来方便的将这些功能结合进组件。

  1. mapState
  2. mapGetters
  3. mapMutations
  4. mapActions

示例代码:

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

// ....
computed: {
  localComputed () { /* ... */ },
  ...mapState({
    // 为了能够使用 `this` 获取局部状态,必须使用常规函数
    count(state) {
      return state.count + this.localCount
    }
  }),
  ...mapGetters({
    getterCount(state, getters) {
      return state.count + this.localCount
    }
  })
}
methods: {
  ...mapMutations({
       add: 'increment' // 将 `this.add()` 映射为`this.$store.commit('increment')`
    }),
  ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
}

如果结合进组件之后不想改变名字,可以直接使用数组的方式。

methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷:
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
}

store分割为模块。

可以将应用的store分割为小模块,每个模块也都拥有所有的东西:state, getters, mutations, actions。 首先创建子模块的文件:

// initial state
const state = {
  added: [],
  checkoutStatus: null
}
// getters
const getters = {
  checkoutStatus: state => state.checkoutStatus
}
// actions
const actions = {
  checkout ({ commit, state }, products) {
  }
}
// mutations
const mutations = {
  mutation1 (state, { id }) {
  }
}
export default {
  state,
  getters,
  actions,
  mutations
}

然后在总模块中引入:

import Vuex from 'vuex'
import products from './modules/products' //引入子模块

Vue.use(Vuex)
export default new Vuex.Store({
  modules: {
    products   // 添加进模块中
  }
})

其实还存在命名空间的概念,大型应用会使用。需要时查看文档即可。Vuex的基本使用大致如此。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript this 绑定规则

    在 JavaScript 中,this 的绑定规则有4种,规则间存在着不同的优先级。

    用户1065635
  • npx 是什么?

    这条命令会临时安装 create-react-app 包,命令完成后 create-react-app 会删掉,不会出现在 global 中。下次再执行,还是会...

    用户1065635
  • Javascript闭包

    越来越觉得国内没有教书育人的氛围,为了弄懂JS的闭包,我使出了我英语四级吃奶的劲去google上搜寻着有关闭包的解释,当我看到stackoverflow上这一篇...

    用户1065635
  • vuex - 常用命令学习及用法整理

    xing.org1^
  • as3:Function以及call,apply

    Function类在as3中是直接从Object继承下来的,通常开发者定义的每一个function,均可以认为是Function类的一个实例。  如果硬要跟c#...

    菩提树下的杨过
  • 干货 | “给高速行驶的汽车换轮胎”,携程度假产品系统改造实践

    本文将介绍在业务持续发展环境中,复杂系统的改造过程以及实施的一些经验,希望能给面对同样问题的同学提供一些借鉴思路。

    携程技术
  • Flutter基础widgets教程-ExpansionPanel篇

    青年码农
  • 网站被植入Webshell,怎么处理?

    网站被植入webshell,意味着网站存在可利用的高危漏洞,攻击者通过利用漏洞入侵网站,写入webshell接管网站的控制权。为了得到权限 ,常规的手段如:前后...

    Bypass
  • NAB SHOW 2018前瞻丨三星将带来VR直播,IBM将为电视广播应用AI技术

    VRPinea
  • js实现活动倒计时

    李文杨

扫码关注云+社区

领取腾讯云代金券