精华内容
下载资源
问答
  • VUEX模块化

    2021-06-28 13:43:26
    vuex模块化 每个文件夹都是独立的vuex模块,引入到index里面暴露,vuex-persistedstate此操作是vuex持久化插件。 然后导入main.js并注册: 文件先引入,存值:import{mapState,mapMutations}from"vuex"; ...

    先来看看vuex针对模块的搭建的目录结构吧

    vuex模块化

    每个文件夹都是独立的vuex模块,引入到index里面暴露,vuex-persistedstate此操作是vuex持久化插件。

    然后导入main.js并注册:

    文件先引入,存值:import { mapState, mapMutations } from "vuex";   

    changeEquipment此为导出的模块化名字+  /方法

    取值:

    mapState:后面拼接形参

    后续可以直接使用。

    展开全文
  • Vuex模块化

    2021-06-15 16:39:02
    本文主要讲述vuex模块化使用 为什么要使用模块化? 模块化使用是为了让合作开发更方便,不容易产生git冲突,也是为了让项目代码更清晰合理,便于管理。 另外就是命名空间的问题,就是为了让当前vuex模块里的状态名...

    Vue简单实用请访问https://blog.csdn.net/weixin_51497206/article/details/117510658?spm=1001.2014.3001.5501

    本文主要讲述vuex模块化使用

    为什么要使用模块化?

    模块化使用是为了让合作开发更方便,不容易产生git冲突,也是为了让项目代码更清晰合理,便于管理。

    另外就是命名空间的问题,就是为了让当前vuex模块里的状态名,函数名不和其他的空间相冲突,但是调用时要加上模块名

     

    1.打开vue项目目录下的src文件夹中的store文件夹,新建一个文件夹modules,modules中新建一个DD.js(命名随意)

    此时store中index.js代码如下

    import Vue from "vue";
    import Vuex from "vuex";
    import DD from "./modules/DD"; //引入新建的module
    import createPersistedState from "vuex-persistedstate"; //此处为引入vuex数据持久化插件
    Vue.use(Vuex);
    
    export default new Vuex.Store({
      modules: {
        //Module是store分割的模块,每个模块拥有自己的state、getters、mutations、actions。
        DD, //使用新建的module
      },
      plugins: [
        createPersistedState({
          storage: window.sessionStorage, //默认存入localStorage,此处为存入sessionStorage
        }),
      ],
    });
    

    DD.js如下

    export default {
      state: {
        //存储的数据
        token: "",
        name: "1",
      },
      mutations: {
        setToken(state, token) {
          //更改state存储的数据
          state.token = token;
        },
        setName(state, name) {
          state.name = name;
        },
      },
      actions: {
        //actions触发mutations中的方法
        tokenFun({ commit }, token) {
          commit("setToken", token);
        },
        nameFun({ commit }, name) {
          commit("setName", name);
        },
      },
      namespaced: true, //让本模块成为带命名空间的模块。
    };
    

    打开需要使用vuex的页面,我这里在home.vue里边写了

    启动项目,页面效果如下

    home.vue代码如下

    <template>
      <div class="home">
        <div @click="click">
          {{ name }}
          {{ token }}
        </div>
      </div>
    </template>
    
    <script>
    // @ is an alias to /src
    import { mapActions, mapState } from "vuex"; //引入辅助函数
    export default {
      name: "Home",
      computed: {
        //计算属性中引入vuex模块中的属性
        ...mapState("DD", ["name", "token"]),
        //第一个参数为引入模块名,数组中参数为模块中的state
      },
      methods: {
        ...mapActions("DD", ["tokenFun", "nameFun"]),
        //第一个参数为引入模块名,数组中参数为模块中的actions
        click() {
          this.tokenFun("token"); //括号里的是要存的值
          this.nameFun("name"); //括号里的是要存的值
        },
      },
    };
    </script>
    

    点击页面中的1,页面变动为

    以上即为全部内容

    展开全文
  • vuex模块化

    2020-12-28 15:53:36
    vuex模块化 目录结构如下: types.js 内定义常量,使用常量替代 mutation 事件类型 user.js 内写该 user 组件内用到的 state 、 getters 、 actions 和 mutations,并最后统一导出(类似上个例子中的 store.js ) ...

    vuex模块化

    目录结构如下:

    • types.js 内定义常量,使用常量替代 mutation 事件类型
    • user.js 内写该 user 组件内用到的 state 、 getters 、 actions 和 mutations,并最后统一导出(类似上个例子中的 store.js )
    • getters.js 内写原来的 getters ,用来获取属性
    • actions.js 内写原来的 actions ,就是要执行的动作,如流程的判断、异步请求
    • index.js 是用来组装 actions.js 、 getters.js 、user.js 的,然后进行统一的导出

    创建store文件夹, 创建index.js 作为vuex的入口js

     import app from './modules/app'
        import user from './modules/user'
        import getters from './getters'
        import dept from "./modules/dept";
        
        Vue.use(Vuex)
        
        const store = new Vuex.Store({
          modules: {
            app,
            user,
            dept
          },
          getters
        })
        
        export default store
        
        -------------------------------------------------------------------------------------
        
        import Vue from 'vue';
        import Vuex from 'vuex';
        import getters from './getters';
        
        Vue.use(Vuex);
        
        // 获取 ./modules文件夹下面所有的js文件名称
        const modulesFiles = require.context('./modules', true, /\.js$/);
        
        // you do not need `import app from './modules/app'`
        // it will auto require all vuex module from modules file
        const modules = modulesFiles.keys().reduce((arr, modulePath) => {
          // set './app.js' => 'app'
          const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
          const value = modulesFiles(modulePath);
          arr[moduleName] = value.default;
          return arr;
        }, {});
        
        export default new Vuex.Store({
          modules,
          getters
        });
    

    如上图中,将vuex划分成三个模块,每一个模块都拥有自己的action, mutation, state组件

    创建vuex的子模块, user.js , 编码如下: 注意点就是要开启命令空间模式, namespaced=true , 因为现在的store被划分成了多模块,每一个模块都有自己的state,所有在mapXXX使用时,需要指定使用的是哪个模块下的state

        // 利用vuex存储token的例子
        import { setToken } from '@/utils/auth.js';
        import { login } from '@/api/login';
        import { TipsPop } from '@/utils/tool';
        const state = {
          token: ''
        };
        
        const mutations = {
          // 设置token
          SET_TOKEN(context, data) {
            context.token = data;
          }
        };
        
        const actions = {
          // 设置token
          async setKey(context, data) {
            await context.commit('SET_TOKEN', data);
          },
          // 用户登录
          async userLogin(context, data) {
            let { username, password, isNoLogin = false } = data;
            if (isNoLogin) {
              setToken(1);
              return true;
            }
            let user = await login({ username, password });
            if (user.code !== 200) {
              TipsPop({
                message: '网络出错',
                type: 'error'
              });
              return false;
            }
            setToken(user.access_token);
            return true;
          }
        };
        
        export default {
          state,
          mutations,
          actions
        };
    

    如图,如果不划分模块,我们有两种方法,可以这样,$store.state.属性 或者 $store.getters取出state中的值使用,划分模块后,推荐使用通过名称空间映射的方式映射出不同模块的State再使用

    所以需要再创建getters.js

        const getters = {
          token: state => state.user.token
        };
        export default getters;
    

    辅助函数的使用

        import {mapState,mapMutations,mapActions,mapGetters} from "vuex"
    
    • state的辅助函数需要映射到计算属性中computed,映射的名称一定要相同,然后就可以通过this访问到state
    
         computed:{
                ...mapState(["name"]),//name和vuex中的state保持一至。
            },
        methods:{
          click(){
            console.log(this.name)//访问到vuex的name
          }
        }
    
    • mutation的辅助函数mapMutations把mutations里面的方法映射到methods中。映射的名称一定要相同,然后就可以通过this调用mutaition的方法。
         mutations: {
            show(state){
              console.log(state)
            }
          },
        
        
         methods:{
                ...mapMutations(["show"]),
                click(){
                    this.show()
                },
        }
    
    • mapAcions:把actions里面的方法映射到methods中
    • mapGetters:把getters属性映射到computed身上
    展开全文
  • Vuex 模块化

    2021-02-26 00:34:31
    模块化的简单应用 定义两个模块 user 和 setting user中管理用户的状态 token setting中管理 应用的名称 name export default new Vuex.Store({ modules: { user: { state: { token: '12345' } }, ...

    模块化的简单应用

    定义两个模块 user 和 setting

    user中管理用户的状态 token

    setting中管理 应用的名称 name

    export default new Vuex.Store({
      modules: {
        user: {
          state: {
            token: '12345'
          }
        },
        setting: {
          state: {
            name: 'ww'
          }
        }
      }
    })

    定义一个child-w组件 , 分别显示用户的 token 和 应用名称name

    <template>
      <div>
        <div>{{ $store.state.user.token }}</div>
        <div>{{ $store.state.setting.name }}</div>
      </div>
    </template>
    

    注意: 此时要获取子模块的状态 需要通过 $store.state.模块名称.属性名 来获取

     

    模块化中的命名空间

    默认情况下 模块内部的action , mutation 和 getter 是注册在全局命名空间的------这样使得多个模块能够对同一 mutation 或 action 做出响应

    例如在子模块中添加方法修改state.token的值 那么也可以用this.$store.commit('方法')使用

    但是 , 如果我们想要保证内部模块的高封闭性 , 我们可以采用namespaced来进行设置 可以理解为(给自己房间上一把锁 钥 匙在你手上 只有你可以通过这个钥匙(命名空间)进入房间获取其中数据)

        user: {
          //  值为true表示命名
          namespaced: true,
          state: {
            token: '12345'
          },
          mutations: {
            updateToken (state) {
              state.token = xxx
            }
          }
        }

    方案一: 采用路径形式调用

      methods: {
        ...mapMutations(['user/updateToken']),
        updateToken () {
          // 采用路径模式
          this.$store.commit('user/updateToken')
        }
      },

    方案二 辅助函数-带上模块的属性名路径

        <button @click="test"></button>
    
        test () {
        ...mapMutations(['user/updateToken']),
          this['user/updateToken']()
        }

    方案三 createNamespacedHelpers 创建基于某个命名空间辅助函数

        <button @click="updateToken"></button>
    
    import { mapGetters, createNamespacedHelpers } from 'vuex'
    const { mapMutations } = createNamespacedHelpers('user')
    
      methods: {
        ...mapMutations(['updateToken'])
      },

     

    展开全文
  • Vuex 模块化使用详解

    2020-10-16 15:10:41
    主要介绍了Vuex 模块化使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vuex 模块化

    2020-08-04 09:31:40
    https://segmentfault.com/a/1190000019924674 https://www.wodecun.com/blog/7874.html

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,387
精华内容 6,954
关键字:

vuex模块化

vue 订阅