vuex模块拆分

在vue项目中vuex还是经常用到的，特别是数据比较多时，所有数据放到一个文件下面就有点不合适，这是就用到vuex的模块了。

安装vuex后，在src下面创建store文件夹，下面继续创建index.js文件和module文件夹。 index.js管理vuex的模块。

vuex

import Vue from 'vue'
import Vuex from 'vuex'
import userInfo from "./module/userInfo"

Vue.use(Vuex)

const store = new Vuex.Store({
   
    modules: {
		userInfo
	},
})
export default store

在module文件夹下面创建userInfo.js文件：

vuex模块

/**
 * Created by 23535 on 2018/5/29.
 */
const state = {
  name: '',
  u_id: 'admin',
  userInfo: {},
}
const getters = {
  get_name: state => {
	  return state.name
  },
  current_user: state => {
	  return '张物业'
  },
  user_info_id: state => {
	  return 1234
  }
}

const mutations = {
  CNANG_NAME (state, payload) {
    console.log(state, 'payload', payload)
    state.name = payload.name
  },
  
  CHANG_USERINFO(state, payload){
	  state.userInfo = payload;
	  state.name = payload.name;
	  state.u_id = payload.u_id;
  },

}

const actions = {

  active_name ({ commit }, payload) {
    console.log(payload)
    commit({
      type: 'CNANG_NAME',
      name: payload.name
    })
  },
  login({commit}, payload){
	  
  },
  get_userInfo({commit}, payload){
	  
  },
}

export default {
  namespaced: true, //带命名空间
  state,
  mutations,
  actions,
  getters
}

注意 namespaced 作用

vuex中的store分模块管理，需要在store的index.js中引入各个模块，为了解决不同模块命名冲突的问题，将不同模块的namespaced:true，之后在不同页面中引入getter、actions、mutations时，需要加上所属的模块名。

在main.js里挂载vuex

import Vue from 'vue'
import App from './App'
//引入vuex
import store from './store'
Vue.prototype.$store = store
Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
	...App,
	//挂载
	store
})
app.$mount()

现在vuex已经写好了，下面就在组建里调用了，

<template>
	<view class="container">
		<text class="intro">姓名：{{userNmae}}</text><br/>
		<text class="intro">年龄：{{user_info.age}}</text><br/>
		<text class="intro">u_id：{{u_id}} --- {{user_info_id}}</text><br/>
		<uni-link :href="href" :text="href"></uni-link>
		<button @click="setVuex">vuex</button>
	</view>
</template>

<script>

import { mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers } from 'vuex'
	// //使用createNamespacedHelpers 需要在模块中添加namespaced:true属性，其中参数的js文件导入时的模块名
	const userInfoVuex = createNamespacedHelpers("userInfo")
	
	export default {
		data() {
			return {
				href: 'https://uniapp.dcloud.io/component/README?id=uniui'
			}
		},
		computed:{
			// vuex几种取值方法
			...mapState({
			  u_id: state => state.userInfo.u_id,
			  user_info: state => state.userInfo.userInfo,
			}),
			
			...mapGetters({
			  userNmae: 'userInfo/current_user',
			}),
            
			...userInfoVuex.mapGetters(['get_name', 'user_info_id'])
		},
		
		methods: {
			...userInfoVuex.mapMutations(['CNANG_NAME', 'CHANG_USERINFO']),
			//  改变vuex数据
            setVuex(){
				this.CNANG_NAME({name: '张三'});
			}

		}
	}
</script>

注意 createNamespacedHelpers

createNamespacedHelpers这个方法结合namespaced，我觉得vuex模块拆分时用着很方便。