vuex使用方法简述

下载vuex
npm install vuex --save
module分模块开发

将整个store分割成模块module,每个模块有自己的statemutationgetteraction

1. 新建store目录,在主文件index.js引入vue,vuex。

store目录结构

>store
  >modules
    -app.js
    -user.js
    -tagsView.js
  >getters.js
  >index.js

index.js 主文件创建store对象

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
import saleMaintenance from './modules/saleMaintenance'
import getters from './getters'
import tagsView from './modules/tagsView'

Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {
        app,
        user,
        tagsView,
        saleMaintenance
    },
    getters
})

export default store

main.js 在跟组件注册store对象

import store from './store'

new Vue({
  el: '#app',
  router,
  store,
  template: '',
  components: { App }
})
2. state:状态

在vue子组件获取状态state

  • 子组件中通过this.$store.state获取state。
  • 在vue中展示状态最好是在计算属性computed返回状态。
const Counter = {
  template: `
{{ count }}
`, computed: { count () { return this.$store.state.count } } }

mapState辅助函数

  • 当一个组件需要多个状态时,可以使用mapState辅助函数生成计算属性。
  • 当计算属性名与state节点名相同,可以使用简写方式:字符串数组。
computed: mapState([
  'count' // 映射 this.count 为 store.state.count
])

对象展开运算符

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}
3. getter:从state中派生出来的状态

getter接收2个参数:第一个参数:state ; 第二个:getter

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}
属性获取:this.$store.getters.doneTodosCount

mapGetters 辅助函数

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}
4. mutation:commit 改变store的状态state

提交载荷

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
//提交载荷,载荷payload最好是对象
store.commit('increment', {
  amount: 10
})
5. action:提交的是mutation

当需要commit多次时候,可以参数解构:

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

触发action

store.dispatch('actionA').then(() => {
  // ...
})

你可能感兴趣的:(vuex使用方法简述)