Vuex Module-狀態倉庫分割的使用介紹-Vue.js-PHP中文網

Vuex Module-狀態倉庫分割的使用介紹

藏色散人

發布： 2022-08-10 16:01:01

轉載

1802 人瀏覽過

vuex構成

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

#State // 儲存變數、資料
Mutation // 唯一修改state的方法
Action // 非同步呼叫Mutation
Module // 將store模組化

vuex的modules使用

建立目錄

Vuex Module-狀態倉庫分割的使用介紹

在此範例中，我建立了兩個store文件，分別是

profile.js和custom.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(&#39;CHANGESHOW&#39;)
        }
    },
    getters: { // 将数据过滤输出
        bodyShow: state => state.showAlert    }}export default customs

登入後複製

profile.js

const profile = {
  namespaced: true,
  state: {
    name: &#39;common name&#39;,
    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(&#39;CHANGEMSG&#39;, &#39;Vuex common name&#39;)
    },
    setAge: ({ commit }) => {
      commit(&#39;CHANGEAGE&#39;, 81)
    },
    setBool: ({ commit }) => {
      commit(&#39;CHANGEBOOL&#39;)
    }
  },
  getters: {
    vuexName: state => state.name,
    vuexAge: state => state.age,
    vuexBool: state => state.bool  }}export default common

登入後複製

index.js

import Vue from &#39;vue&#39;
import Vuex from &#39;vuex&#39;

// 引入子store
import profile from &#39;./modules/profile&#39;
import customs from &#39;./modules/customs&#39;

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

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

登入後複製

在需要使用的.vue檔案裡進行使用。方法如下

index.vue

<template>
	<div>
	  name: <h5>{{vuexName}}</h5> <button @click=&#39;setName&#39;>chenge name</button>
      age: <h5>{{vuexAge}}</h5> <button @click=&#39;setAge&#39;>chenge age</button>
      bool: <h5>{{vuexBool}}</h5> <button @click=&#39;setBool&#39;>chenge bool</button>
      <br/>
      
      <span @click=&#39;setShow&#39; style=&#39;display:inline-block;width:200px;height:30px;border:1px solid #999;border-radius:5px;text-align:center;line-height:30px;cursor: pointer;&#39;>click me ,change showAlert</span>
      <em>{{bodyShow}}</em>
	</div>
</template>
<script>
import { mapActions, mapGetters } from &#39;vuex&#39;
export default {
computed: {
    ...mapGetters(&#39;profile&#39;, [&#39;vuexName&#39;, &#39;vuexAge&#39;, &#39;vuexBool&#39;]),
    ...mapGetters(&#39;customs&#39;, [&#39;bodyShow&#39;])
  },
methods: {
    ...mapActions(&#39;customs&#39;, [&#39;setShow&#39;]),
    ...mapActions(&#39;profile&#39;, [&#39;setName&#39;, &#39;setAge&#39;, &#39;setBool&#39;]),
}
</script>
<style>

</style>

登入後複製

app.js

import Vue from &#39;vue&#39;;
import VueRouter from &#39;vue-router&#39;;
// style
import &#39;./../../sass/app.scss&#39;;

// Components
import Main from &#39;./Main.vue&#39;;
import routes from &#39;./routes&#39;;
// store
import store from &#39;./store&#39;;  // 将store挂载到Vue

Vue.use(VueRouter);

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

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

登入後複製

初始效果圖⬇️

Vuex Module-狀態倉庫分割的使用介紹點擊按鈕之後效果圖⬇️

至此，modules使用流程示範完畢！【相關推薦：
vue.js影片教學】