学习笔记Vue(二十四)——vuex module

为了使我们每个页面组件的state分离开,可以使用modules来给vuex分模块。
先在src文件夹下创建一个store文件夹,用来存放我们的模块文件,然后把store.js也放到这个文件夹下,作为入口文件。
在这里插入图片描述
然后不要忘了修改main.js里引入store.js的路径

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/store'  //原来是  './store'

在store.js里引用你自己创建的模块:

import Vue from 'vue'
import Vuex from 'vuex'
import student from './student'  //引用你创建的student模块

Vue.use(Vuex)    //通过$store去获取到vuex中的state   $store.state.name 

export default new Vuex.Store({
  //严格模式 在 开发环境开,在生产环境不开
  strict: process.env.NODE_ENV !== 'production',
  modules: {
    student,
  }
})

student.js

export default {
    namespaced: true,
    state: {
        name: 'grandmaz',
        age: 22,
        studentList: []
    },
    getters: {
        person(state) {
            return `姓名:${state.name} 年龄:${state.age}`;
          },
          newStudentList(state){
            return state.studentList.map(student => `姓名:${student.name} 年龄:${student.age}`);
          }
    },
    mutations: {
        changeStudentList (state, {tempObj, name}){
            state.studentList.push(tempObj);
            state.name = name;
          }
    },
    actions: {
        changeStudentList ({commit}, payload){
            //payload 传递的参数
            setTimeout(()=>{
                commit('changeStudentList',payload);
            },1000);
          }
    }
}

modules 可以根据功能让vuex 的state分模块,
state会放入到每一个模块下,getters,mutations,actions会直接放到全局。

(一) 获取vuex中的数据(无namespaced):
  1. 获取state: this.$store.state.modulename.xxx
  2. 获取getters:this.$store.getters.xxx
  3. 获取mutations:this.$store.commit(‘xxx’)
  4. 获取actions:this.$store.dispatch(‘xxx’)
  5. 可以通过mapXXX方式拿到 getter、mutations、actions,但是不能拿到state,如果需要这种方式获取state,需要加命名空间,namespaced:true
(二) 获取vuex中的数据(有namespaced):
  1. 获取state: this.$store.state.modulename.xxx
  2. 获取getters:this.$store.getters[‘modulename/getters’].xxx
  3. 获取mutations:this.$store.commit(‘modulename/xxx’)
  4. 获取actions:this.$store.dispatch(‘modulename/xxx’)
  5. 通过mapXXX获取:mapXXX(‘modulename’, [‘xxx’])
    mapXXX(‘modulename’,{})
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值