技術文章 » 詳細介紹vue中vuex（詳解及範例）

詳細介紹vue中vuex（詳解及範例）

2021-12-31 19:00:29
本篇文章給大家帶來了vue中vuex的相關知識，Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式，希望對大家有幫助。

概念

    Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

安裝

  1. HTML 中使用 script 標籤引入
<script src="vue.js"></script>
<script src="vuex.js"></script>
  1. Vue專案中使用 npm 下載安裝（需要安裝 Node 環境）
// 下載
npm install vuex --save

// 安裝
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

Vuex 圖示

Vuex 和單純的全域性物件有以下兩點不同：

  • Vuex 的狀態儲存是響應式的。當 Vue 元件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的元件也會相應地得到高效更新。

  • 不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態的變化，從而讓我們能夠實現一些工具幫助我們更好地瞭解我們的應用。

Store

    每一個 Vuex 應用的核心就是 store（倉庫）。「store」 基本上就是一個容器，它包含著你的應用中大部分的狀態 (state)。

State

    驅動應用的資料來源，用於儲存所有元件的公共資料.。

Getter

    可以將 getter 理解為 store 的計算屬性, getters 的返回值會根據它的依賴被快取起來，且只有當它的依賴值發生了改變才會被重新計算。

Mutation

    mutations 物件中儲存著更改資料的回撥函數,該函數名官方規定叫 type, 第一個引數是 state, 第二引數是payload, 也就是自定義的引數。mutation 必須是同步函數。mutations 物件裡的方法需要使用 store.commit 呼叫

Action

    Action 提交的是 mutation 而不是直接變更狀態。action 可以包含任意非同步操作。actions 物件裡的方法需要使用 store.dispatch 呼叫。

    Action 函數接受一個與 store 範例具有相同方法和屬性的 context 物件，因此你可以呼叫 context.commit 提交一個 mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters。

Module

    由於使用單一狀態樹，應用的所有狀態會集中到一個比較大的物件。當應用變得非常複雜時，store 物件就有可能變得相當臃腫。為了解決以上問題，Vuex 允許我們將 store 分割成模組（module）。每個模組擁有自己的 state、mutation、action、getter、甚至是巢狀子模組——從上至下進行同樣方式的分割。

HTML中 vuex 的使用

<body><p id="app">
    <input type="button" value="+" @click="add">
    {{this.$store.state.count}}
    <input type="button" value="-" @click="reduce">
    {{this.$store.getters.synchro}}
    <input type="button" value="改變為10" @click="changeNum"></p><script src="vue.js"></script><script src="vuex.js"></script><script>
    var store = new Vuex.Store({
        state: {
            count: 0
        },
        getters: {
            synchro(state) {
                return state.count            }
        },
        mutations: {   
            increment(state) {
                state.count++
            },
            inreduce(state) {
                state.count--
            },
            inchange(state, num) {
                state.count = num            }
        },
        actions: {
            change(context, num) {
                context.commit('inchange', num)
            }
        }
    })

    new Vue({
        el: '#app',
        store,
        methods: {
            add() {
                this.$store.commit('increment')
            },
            reduce() {
                this.$store.commit('inreduce')
            },
            changeNum() {
                this.$store.dispatch('change', 10)
            }
        }
    })</script></body>

Vue 專案中 vuex 的使用（兩種）

  1. 把 vuex 寫在 main.js 檔案裡
import Vue from 'vue'import App from './App'import router from './router'import Vuex from 'vuex'// 全域性狀態管理Vue.use(Vuex)Vue.config.productionTip = falsevar store = new Vuex.Store({
  state: {
    num: 0
  },
  mutations: {
    changeNum(state, num){
      state.num += num    }
  }})new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'})

    在元件中呼叫

<template>
	<p>
		<input type="button" value="改變count的值" @click="change">
    	{{this.$store.state.count}}
	<p></template><script>export default {
	name: '',
	data () {
    	return {
		}
    },
    methods: {
		change() {
			this.$store.commit('changeNum', 10)
		}
	}}</script>
  1. 把 vuex 分離出來

    在 src 目錄下建立一個 vuex 目錄，新建 modules 目錄 和 index.js 檔案 放到 vuex 目錄下

    在 main.js 檔案裡引入 vuex 目錄

import Vue from 'vue'import App from './App'import router from './router'import store from './vuex'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'})

    在 index.js 裡寫上如下程式碼

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)let modules = {}const requireAllModules = require.context("./", true, /\.js$/)requireAllModules.keys().forEach(key => {
  let module = requireAllModules(key).default
  if (module && module.name && module.namespaced) {
    modules[module.name] = module  }})export default new Vuex.Store({
  modules: modules,
  strict: process.env.NODE_ENV !== "production"})

    在 modules 目錄下 新建 city.js 檔案，裡面程式碼如下

export default {
  name: "city",
  namespaced: true,
  state: {
    cityName: '',
    cityCode: ''
  },
  getters: {
    getState(state) {
      return state    },
    getCityCode(state) {
      return state.cityCode    }
  },
  mutations: {
    changeCity(state, cityName) {
      state.cityName = cityName    }
  }}

    在元件裡設定值

<template>
	<p>
		<ul>
          <li v-for="item in city" @click="handChangeCity(item.name)"></li>
        </ul>
	</p></template><script>import { mapMutations } from 'vuex'   // 引入vuexexport default {
	name: "city",
	data() {
		return {
			city: [
				{ id: 1, name: '北京' }
				{ id: 2, name: '上海' }
				{ id: 3, name: '廣州' }
				{ id: 4, name: '深圳' }
				{ id: 5, name: '廈門' }
			]
		}
	},
	methods: {
		// 修改
		...mapMutations({
			changeCity: "city/changeCity"
		}),
		// 第一種寫法
		handChangeCity(cityName) {
			this.changeCity(cityName)
		}
		// 第二種寫法  不需要使用 ...mapMutations
		handChangeCity(cityName) {
			this.$store.commit('city/changeCity', cityName);
		}
	}}</script>

    在另一個元件裡使用

<template>
	<p>
		<p>{{getState.cityName}}</p>
		<p>{{getCityCode}}</p>
	</p></template><script>import { mapGetters} from 'vuex'   // 引入vuexexport default {
	data() {
		return {
		}
	},
	computed: {
	    // 第一種使用方法
	    ...mapGetters({
	    	getState: "city/getState"
	    })
	    // 第二種使用方法
	    ...mapGetters('city', ['getState', 'getCityCode'])
  	}}</script>

以上就是詳細介紹vue中vuex（詳解及範例）的詳細內容，更多請關注TW511.COM其它相關文章！