7-3 Element UI及Vuex-Vuex基本用法


目錄:

  • 簡介
  • Vuex原理圖
  • 基本用法

一、簡介

1.1、Vuex的概念和作用

 Vuex 是一個專為 Vue.js 引用程序並發的狀態管理模式,它采用集中式存儲管理應用的所有組件的狀態,並以相應的規則保證狀態以一種可預測的方式放生變化。簡單來說:Vuex是用來集中管理數據,類似於React中的Redux(回來,回家),都是基於Flux(融化了)的前端狀態管理框架。Vuex 一般小項目,寫兩個頁面是用不到的,但是中大型項目是需要用到的。

1.2、訪問Vuex官網方式

 1.Vuex的官網:https://vuex.vuejs.org/zh/    

 2.也可以通過 Vue.js 官網進入 Vuex的官網:生態系統 -> 核心插件 ->  Vuex

1.3、什么是組件狀態?

 比如說你的組件會有不同的狀態,這個狀態比如說顯示或者隱藏,或者你的數據的需要展示,你的數據管理等等,都可以使用Vuex來操作。

1.4、Vuex在集中管理數據起到什么作用?

 集中管理數據的,你的項目當中很多數據需要管理,包括你的組件間需要數據的傳遞,傳遞的方式我們也可以用不同的方式,如:父子組件的數據傳遞(props和觸發事件),非父子組件的數據傳遞(中央總線方式)。但是如果說你的項目太復雜,以組件的方式傳遞數據,用這種方式特別費勁,而且很亂。項目真的變大了之后,這種單線傳遞太麻煩了,所以現在基本都用Vuex。但是你的項目很簡單,沒有必要使用Vuex。

二、Vuex的原理圖

這個原理圖在官網也有,只不過我說明了一下。官網管理圖

原理圖說明:

1. Vue組件上操作,會發出(dispatch)一個動作(actions) -> 2. 提交(commit) 改變(mutation)的數據 -> 3.突變或者說改變(mutate) 狀態(state)中的數據 -> 4.改變之后,重新渲染(render)組件(Vue Components) ->5.組件就會更新,展示更新過后的數據。

三、基本使用

3.1、安裝Vuex

>npm install vuex -S

3.2、目錄結構

|-vuex-demo
    |-node-modules
    |-src
        |-assets
        |-App.vue
        |-main.js
        |-store.js  //vuex的相關配置都在store.js中
    |-.babelrc
    |-...
    |-webpack.config.js

3.3、創建store.js文件,在main.js中導入並且配置store對象

 說明:Vuex的相關配置都在這個里面配置的

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

import store from './store.js'  //導入store對象

new Vue({
  el: '#app',
  render: h => h(App),
  //配置store選項,指定為store對象,會自動將store對象注入到所有子組件中(Vue實例是根組件,其他的都是子組件),在子組件中通過this.$store訪問store對象
  store  //(縮寫) store:store,導入Vuex后就有store這么一個選項,store值就是你導入的store
});

注意了:Vue實例是根組件,Vue實例下注冊的組件,都是vue根組件下的子組件。

3.4、編輯 store.js

Vuex的核心是store(倉庫),相當於一個容器,一個store實例中包含以下屬性方法:

state:   定義屬性(狀態、數據)
getters: 用來獲取屬性
actions: 定義方法(動作)
commit:  提交變化,修改數據的唯一方式就是現實的提交mutations
mutations: 定義變化(或突變),來改變數據

注:不能直接修改數據,必須是顯式提交變化,目的是為了追蹤到狀態的變化

store.js的內容(方式1:通過this.$store訪問) :

/*
* Vuex 配置
* */

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

Vue.use(Vuex);

//1.定義屬性(數據)
var state={
  count:6
};

//2.創建store對象
const store = new Vuex.Store({
  state  //(縮寫) state:state
});


//3.導出store對象
export default store;

 store.js的內容(方式2:通過mapGetters、mapActions訪問) :

/*
* Vuex 配置
* */

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

Vue.use(Vuex);

//1.定義屬性(數據)
let state={
  count:6
};
//2.定義getters
let getters = {
  count(state){ //參數state就是上面的state
    return state.count;
  }
};

//3.定義actions,要執行的操作,如流程判斷,一部請求等
const actions = {
  /*increment(context){ //對應的increment的就是App.vue中綁定的事件
      console.log(context);
  }*/
  increment({commit,state}){ //es6的語法
    commit('increment'); //提交(commit)一個名為increment的變化,名稱自定義,可以認為是類型名
  }
};

//4.定義mutations處理狀態(數據)的改變
const mutations = {
  increment(state){  //increment函數名必須跟 actions中的commit是一樣的
    state.count++;
  }
};

//5.創建store對象
const store = new Vuex.Store({
  state,  //(縮寫) state:state
  getters,
  actions,
  mutations
});


//6.導出store對象
export default store;

我們先來看看actions是中的context有哪些東西:

▼{getters: {…}, state: {…}, rootGetters: {…}, dispatch: ƒ, commit: ƒ, …}
   ▶dispatch: ƒ boundDispatch(type, payload)
   ▶commit: ƒ boundCommit(type, payload, options)
   ▶getters: {}
   ▶state: {__ob__: Observer}
   ▶rootGetters: {}
   ▶rootState: {__ob__: Observer}
   ▶__proto__: Object

很明顯是一個對象,但是我們用es6的語法使用,不然用起來比較麻煩!!!

3.5、編輯App.vue

在子組件中訪問store對象的兩種方式:

方式1:通過this.$store訪問

方式2:通過MapState、mapGetters、mapActions訪問,Vuex提供了2個方法:

MapState:獲取state
mapGetters: 獲取getters,獲取屬性(數據)
mapActions: 獲取actions,獲取方法(動作)

App.vue編輯(方式1:通過this.$store訪問)

<template>
  <div id="app">
    <!--獲取計算屬性count-->
    <p>當前數據為:{{count}}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  //方式1: 通過this.$store訪問
  computed:{
    count(){
      return this.$store.state.count;
    }
  }
}
</script>

 App.vue編輯(通過mapGetters、mapActions訪問)

<template>
  <div id="app">
    <!--觸發事件-->
    <button @click="increment">增加</button>
    <!--獲取數據-->
    <p>當前數據為:{{count}}</p>
  </div>
</template>

<script>
//先導入mapState(匹配state),mapGetters(匹配屬性),mapActions(匹配方法)方法
import {mapState,mapGetters,mapActions} from 'vuex'

export default {
  name: 'app',
  //方式2:通過mapGetters、mapActions訪問
  //computed:mapGetters([
  //  'count' //對應的store.js中的getters中的count()方法
  //]),
  computed:mapState([
       'count'   //對應就是state中的count
  ]),
  methods:mapActions([
    'increment'    //匹配store.js中的actions中的increment方法
  ])
}
</script>

  通過mapState或者mapGetters都可以獲取count值,這個就要看你喜歡用什么了,只不過mapState是直接獲取 state中的值,而mapGetters是通過定義方法獲取,而且用getters,來獲取處理過的數據不一定就是直接的count,例子下面代碼練習有。

3.6、Vuex的練習所有代碼

說明:main.js就直接引用上面的,其他的完整練習代碼如下,這邊特別注意的是:我們在調代碼的時候 可以 配合 vue-devtools 配合使用,使用方法:1-1 基本用法-第一個vue程序

1、App.vue組件

<template>
  <div id="app">
    <button @click="increment">增加</button>
    <button @click="decrement">減少</button>
    <button @click="incrementAsync">增加</button>
    <!--獲取數據-->
    <p>當前數據為:{{count}}</p>
    <p>{{isEvenOrOdd}}</p>
  </div>
</template>

<script>
import {mapState,mapGetters,mapActions} from 'vuex'

export default {
  name: 'app',
  //方式2:通過mapGetters、mapActions訪問
   computed:mapGetters([
    'count', //對應的store.js中的getters中的count()方法
     'isEvenOrOdd'
  ]),
  // computed:mapState([
  //   'count'   //對應就是state中的count
  // ]),
  methods:mapActions([
    'increment',
    'decrement',
    'incrementAsync'
  ])
}
</script>

<style>
</style>

2、store.js代碼:

/*
* Vuex 配置
* */

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

Vue.use(Vuex);

//1.定義屬性(數據)
let state={
  count:6
};
//2.定義getters
let getters = {
  count(state){ //參數state就是上面的state
    return state.count;
  },
  isEvenOrOdd(state){ //getters,來獲取處理過的數據不一定就是直接的count
    return state.count%2 == 0?'偶數':'奇數';
  }
};

//3.定義actions,要執行的操作,如流程判斷,一部請求等
const actions = {
  /*increment(context){ //對應的increment的就是App.vue中綁定的事件
      console.log(context);
  }*/
  increment({commit,state}){ //es6的語法
    commit('increment'); //提交(commit)一個名為increment的變化,名稱自定義,可以認為是類型名
  },
  decrement({commit,state}){
    //在提交條件這邊做判斷
    if(state.count>10){
      commit("decrement");
    }
  },
  incrementAsync({commit,state}){
    //異步操作
    let p = new Promise((resolve,reject) => {
      setTimeout(() => {
        resolve();
      },3000);
    });
    p.then(()=> {
      commit('increment'); //狀態改變可以是同一個操作
    }).catch(() => {
      console.log('異步操作');
    });
  }
};

//4.定義mutations處理狀態(數據)的改變
const mutations = {
  increment(state){  //increment函數名必須跟 actions中的commit是一樣的
    state.count++;
  },
  decrement(state){
    state.count--;
  }
};

//5.創建store對象
const store = new Vuex.Store({
  state,  //(縮寫) state:state
  getters,
  actions,
  mutations
});


//6.導出store對象
export default store;

實現界面如下:

  

當前數據為:6

偶數

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM