规范化的使用vuex

安装vuex

vuex 的使用必须保证先安装 vuex,使用vue脚手架搭建工程的话可以直接勾上 vuex 选项，额外添加可以输入指令

npm install vuex --save

创建 根目录/src/store/modules/modules1.js(项目大了可拆分更多模块)

const modules1 = {
  state: {
    // 定义组件通用状态
    commonState: 0
  },
  mutations: {
    // 通过传入载荷commonState的值改变通用状态
    SET_COMMONSTATE: (state, commonState) => {
      state.commonState = commonState
    }
  },
  getters: {
    // 定义commonState计算获取状态仓库中当前模块的commonState
    commonState: state => state.commonState
  },
  actions: {
    // 定义setCommonState方法异步调用突变函数setCommonState来改变状态仓库modules1中的commonState
    setCommonState: ({ commit }, commonState) => {
      return commit('SET_COMMONSTATE', commonState)
    }
  }
}
export default modules1

创建 根目录/src/store/index.js

// 引入vue
import Vue from 'vue'

// 引入vuex
import Vuex from 'vuex'

// 引入modules1模块化通用库（可按项目实际要求增减，将特定组件的通用变量做模块化拆分）
import modules1 from './modules1/modules1.js'

// Vue使用依赖模块
Vue.use(Vuex)

// 实例化Vuex.Store,将modules1模块挂载到Store进去（可挂载多个模块如modules2、modules3...），最后将整个Store暴露出去
export default new Vuex.Store({
  modules: {
    modules1
  }
})

在 根目录/src/main.js中

// 引入vue
import Vue from 'vue'

// 引入vuex的store数据库
import store from './store/index.js'

// 实例化vue单文件应用
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

创建 根目录/src/util/mixin.js

import { mapGetters, mapActions } from "vuex"
export const modules1Mixin = {
  computed: {
    ...mapGetters([
      'commonState'
    ])
  },
  methods: {
    ...mapActions([
      'setCommonState'
    ])
  }
}

单文件组件中获取/设置通用变量commonState

<template>
  <div>
    <!-- 可以像调用计算属性一样调用commonState -->
    <div>
      组件一通用变量当前值:{{commonState}}
    </div>
    <button @click='add'>自增</button>
    <button @click='sub'>自减</button>
  </div>
</template>

<script>
import { modules1Mixin } from '../util/mixin.js'
export default {
  // 混入modules1的通用变量及函数(如果还需要modules2等其他模块的通用变量，可加到mixins的[]中用逗号隔开)
  mixins: [modules1Mixin],
  methods: {
    add () {
      // 异步设置commonState自增
      this.setCommonState(this.commonState + 1)
    },
    sub () {
      // 异步设置commonState自减
      this.setCommonState(this.commonState - 1)
    }
  }
}
</script>

<style lang="sass" scoped>
</style>