首頁 > web前端 > js教程 > 主體

vuex2.0modules詳解

小云云
發布: 2018-01-16 13:05:34
原創
2285 人瀏覽過

本文主要介紹了vuex2.0 之 modules,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。

什麼是module?

背景:在Vue中State使用是單一狀態樹結構,應該的所有的狀態都放在state裡面,如果項目比較複雜,那麼state就是一個很大的對象, store物件也將對變得非常大,難以管理。

module:可以讓每個模組擁有自己的state、mutation、action、getters,使得結構非常清晰,方便管理。

怎麼用module?

一般結構


#
const moduleA = {
 state: { ... },
 mutations: { ... },
 actions: { ... },
 getters: { ... }
 }
const moduleB = {
 state: { ... },
 mutations: { ... },
 actions: { ... }
 }

const store = new Vuex.Store({
 modules: {
  a: moduleA,
  b: moduleB})
登入後複製

模組內部的資料:①內部state,模組內部的state是局部的,也就是模組私有的,例如car.js模組state中的list數據,我們要透過this.$store.state.car.list取得;②內部getter、mutation和action,仍然註冊在全域命名空間內,這是為了多模組可以同時回應同一mutation;this.$store.state.car.carGetter的結結果是undefined,而透過this.$store.state.carGetter則可以拿到。

傳參:getters====({state(局部狀態),getters(全域getters物件),roosState(根狀態)});actions====({state(局部狀態),commit,roosState(根狀態)}).

新建一個專案體驗一下,透過vue –cli新建一個專案vuemodule, 不要忘記安裝vuex.

1, 在src 目錄下新一個login資料夾,在裡面新建index.js 存放login 模組的狀態。 為了簡單起見,我把模組下的state, actions,mutations, getters 全放在index.js檔案中。

先簡單給它增加一個狀態,userName: “sam”


#
const state = {
  useName: "sam"
};
const mutations = {

};
const actions = {

};
const getters = {

};

// 不要忘记把state, mutations等暴露出去。
export default {
  state,
  mutations,
  actions,
  getters
}
登入後複製

2,在src 目錄下,再新建一個store.js 這是根store, 它透過modules 屬性引入login模組。


import Vue from "vue";
import Vuex from "Vuex";

Vue.use(Vuex);

// 引入login 模块
import login from "./login"

export default new Vuex.Store({
  // 通过modules属性引入login 模块。
  modules: {
    login: login
  }
})
登入後複製

3, 在main.js中引入store, 並注入到vue 根實例中。


import Vue from 'vue'
import App from './App.vue'

// 引入store
import store from "./store"

new Vue({
 el: '#app',
 store, // 注入到根实例中。
 render: h => h(App)
})
登入後複製

4,在app.vue 中透過computed屬性取得到login下的state.  這裡要注意,在沒有modules 的情況下,元件中透過  this.$ store.state.屬性名稱  可以取得到,但有modules 之後,state 被限製到login 的命名空間(模組)下,所以屬性名稱前面必須加模組名稱(命名空間),元件中透過this.$store.state .模組名.屬性名,這裡是this.$store.state.login.userName


#
<template>
 <p id="app">
  <img src="./assets/logo.png">
  <h1>{{useName}}</h1>
 </p>
</template>

<script>
export default {
 // computed属性,从store 中获取状态state,不要忘记login命名空间。
 computed: {
  useName: function() {
   return this.$store.state.login.useName
  }
 }
}
</script>
登入後複製

元件中成功取得到狀態。專案目錄與展示如下

4 ,透過actions, mutations 改變名字, 這就涉及到dispatch action, commit mutations, mutations 改變state.

先在login 資料夾index.js中加入changeName action 和  CHANGE_NAME  mutations.


const mutations = {
  CHANGE_NAME (state, anotherName) {
    state.useName = anotherName;
  }
};

const actions = {
  changeName ({commit},anotherName) {
    commit("CHANGE_NAME", anotherName)
  }
};
登入後複製

在app.vue 中新增一個按鈕:

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!