使用vuex进行状态管理

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
// 导入vuex的store
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  // 把vuex的store配置在vue根实例中
  store,
  components: { App },
  template: '<App/>'
})

./store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const moduleA = {
  // 为了方便书写调用, 开启命名空间
  namespaced: true,
  state: {
    name: '我是哈哈哈',
    gender: 'female',
    hobby: '敲代码'
  }
}

const store = new Vuex.Store({
  // 提炼出得模块数据
  modules: {
    moduleA
  },
  state: {
    count: 7,
    testNum: 8888999,
    msg: 'hello world'
  },
  mutations: {
    add (state) {
      state.count++
    },
    sub (state) {
      state.count--
    },
    handleAdd (state, payload) {
      state.testNum = state.testNum + payload.amount
    },
    handleChange (state, payload) {
      state.msg = payload.txt
    }
  },
  // Action 提交的是 mutation,而不是直接变更状态。
  // Action 可以包含任意异步操作
  actions: {
    // 与 store 实例具有相同方法和属性的 context 对象
    actionChange (context, payload) {
      setTimeout(() => {
        context.commit('handleChange', payload)
      }, 1000)
    }
  }
})

export default store

组件中使用

<template>
    <div>
      <button @click="change({txt: Ctxt})">调用Actions中的方法</button>
      <hr>
      <h1>store--state中的数据</h1>
      {{ count }}
      {{ testNum }}
      {{ msg }}
      <br>
      <h1>store--moduleA中的数据</h1>
      {{ this.$store.state.moduleA.name }}
      {{ this.$store.state.moduleA.gender }}
      <br>
      <h1>moduleA中简化调用</h1>
      {{ name }} -- {{ gender }} -- {{ hobby }}
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'ComD',
  methods: {
    // 将this.handleAdd 映射到 this.$store.commit('handleAdd')
    ...mapMutations(['handleAdd'])
    // 将 this.change() 映射为this.$store.dispatch('actionChange')
    ...mapActions({change: 'actionChange'})
  },
  computed: {
    // 把store中的state映射到this.count/testNum/msg
    ...mapState(['count', 'testNum', 'msg']),
    // 把store中的moduleA模块中的state映射到this.name/gender/hobby
    ...mapState('moduleA', ['name', 'gender', 'hobby'])
  }
}
</script>

<style scoped>

</style>

别忘记在根组件APP.vue中注册一下组件 然后使用

<template>
  <div id="app">
    <com-a></com-a>
    <hr>
    <com-b></com-b>
    <hr>
    <com-c></com-c>
    <com-d></com-d>
  </div>
</template>

<script>
// 引入组件
import Num from '@/components/Num'
import ComA from '@/components/ComA'
import ComB from '@/components/ComB'
import ComC from '@/components/ComC'
import ComD from '@/components/ComD'
export default {
  name: 'App',
  // 使用组件
  components: {
    Num,
    ComA,
    ComB,
    ComC,
    ComD
  },
  data () {
    return {
      // ...
    }
  },
  methods: {
    // ...
  }
}
</script>

<style>
</style>
更多的使用方法去vuex的官网查看即可 vue>vuex

1 + 7 =

得之太易者必不受珍惜。唯有付出代价,万物始有价值。