大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

VuexModule状态仓库分割如何使用

今天小编给大家分享一下Vuex Module状态仓库分割如何使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

创新互联公司是一家专业从事网站建设、成都做网站的网络公司。作为专业网站建设公司,创新互联公司依托的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、网络营销推广及网站设计开发服务!

vuex构成

vuex主要包含以下五个部分:

  • State // 存储变量、数据

  • Getter // 类似计算属性

  • Mutation // 唯一修改state的方法

  • Action // 异步调用Mutation

  • Module // 将store模块化

vuex的modules使用

创建目录

Vuex Module状态仓库分割如何使用

在此示例中,我创建了两个store文件,分别是 profile.jscustom.js,一个根文件index.js

custom.js

const customs = {
    namespaced: true, // 创建命名空间
    state: { // 存储变量
        showAlert: false
    },
    mutations: { // 定义修改state方法
        CHANGESHOW: (state, params) => {
            state.showAlert = !state.showAlert        }
    },
    actions: { // 异步调用mutations
        setShow: ({ commit }) => {
            commit('CHANGESHOW')
        }
    },
    getters: { // 将数据过滤输出
        bodyShow: state => state.showAlert    }}export default customs

profile.js

const profile = {
  namespaced: true,
  state: {
    name: 'common name',
    age: 18,
    bool: false
  },
  mutations: {
    CHANGEMSG: (state, params) => {
      state.name = params    },
    CHANGEAGE: (state, params) => {
      state.name = params    },
    CHANGEBOOL: (state) => {
      state.bool = !state.bool    }
  },
  actions: {
    setName: ({ commit }) => {
      commit('CHANGEMSG', 'Vuex common name')
    },
    setAge: ({ commit }) => {
      commit('CHANGEAGE', 81)
    },
    setBool: ({ commit }) => {
      commit('CHANGEBOOL')
    }
  },
  getters: {
    vuexName: state => state.name,
    vuexAge: state => state.age,
    vuexBool: state => state.bool  }}export default common

index.js

import Vue from 'vue'
import Vuex from 'vuex'

// 引入子store
import profile from './modules/profile'
import customs from './modules/customs'

// Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    profile,
    customs
  }
})

export default store // 导出store,以便于后续使用

在需要使用的.vue文件里进行使用。方法如下

index.vue



app.js

import Vue from 'vue';
import VueRouter from 'vue-router';
// style
import './../../sass/app.scss';

// Components
import Main from './Main.vue';
import routes from './routes';
// store
import store from './store';  // 将store挂载到Vue

Vue.use(VueRouter);

const router = new VueRouter({
  routes,
  saveScrollPosition: true,
});

new Vue({ router, store, ...Main }).$mount('#app');

初始效果图 ⬇️
Vuex Module状态仓库分割如何使用
点击按钮之后效果图 ⬇️
Vuex Module状态仓库分割如何使用

以上就是“Vuex Module状态仓库分割如何使用”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。


网站栏目:VuexModule状态仓库分割如何使用
分享URL:http://dzwzjz.com/article/ghhjie.html
在线咨询
服务热线
服务热线:028-86922220
TOP