VUEX 模块化处理

在多层嵌套兄弟组件中传值时,页面数量太多情况下,传统组件之间传值会变得很麻烦,

而vueX全局管理轻松解决这一问题,大大提高代码可维护性,但不进行模块化处理,

全部写一个index的js文件中,项目大了以后会非常乱,所以模块化是个好习惯!

1.index.js封装代码: main.js 引入./store挂载即可(项目默认挂载就行)

import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters' // 导入响应的模块，*相当于引入了这个组件下所有导出的事例,等同于结构解析所有导出变量
import * as actions from './actions'
import * as mutations from './mutations'
import state from './state'
Vue.use(Vuex)
// 注册上面引入的各大模块
const store = new Vuex.Store({
  state,    // 共同维护的一个状态，state里面可以是很多个全局状态
  getters,  // 获取数据并渲染
  actions,  // 数据的异步操作
  mutations  // 处理数据的唯一途径，state的改变或赋值只能在这里
})

export default store 

2.state.js封装代码:

let state = {
  Name: '周杰伦',
  hobby: '唱歌'
  //所有相关传值变量统一模块存放,最好记得注释是传给哪个功能或组件的值
}
export default state

3.actions.js封装代码:

// 提交请求到mutations里修改state,虽然可以直接一般可以直接通过muation,但不建议.
export const changeName = ({ commit }, obj) => {//es6写法,也可以function retun commit 写法
  commit('changeName', obj) //除了发送commit 还可以进行其他灯异步请求
}

export const changeHobby = ({ commit }, obj) => {
  commit('changeHobby', obj)
}  

4.mutations.js封装代码:

export const changeName = (state, obj) => {
  state.Name = obj //用来修改state的值的唯一途径,也可以对obj进行过滤判断等操作
}
export const changeHobby = (state, obj) => {
  state.hobby = obj
}

5.getters.js封装代码:

export const Name = state => state.Name
export const hobby = state => state.hobby
//同样最好记得注释传给哪个功能模块的值

6.使用方法:

(1).引入组件:mapActions为传值,mapGetters为取值

import { mapActions, mapGetters } from 'vuex'

(2):使用:

 computed: {
    ...mapGetters(['Name','hobby'])  //读取state中变量为Name/hobby的值
    //相当于this.$store.getters.Name/hobby
    
  },
  methods: {
    ...mapActions(['changeName', 'changeHobby']), //调用actions里的传值方法
    // 相当于this.$store.dispatch('changeName/changeHobby'),提交这个方法
  }

(3):举例一种使用情况:

 <p @click="changeName(flag)">{{Name}}</p>

  <p @click="changeHobby('泡妞')">{{hobby}}</p>