站長(zhǎng)資訊網(wǎng)本篇文章給大家?guī)?lái)了vue中vuex的相關(guān)知識(shí)，Vuex 是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式，希望對(duì)大家有幫助。
概念
????Vuex 是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。
安裝
- HTML 中使用 script 標(biāo)簽引入
<script src="vue.js"></script> <script src="vuex.js"></script>
- Vue項(xiàng)目中使用 npm 下載安裝（需要安裝 Node 環(huán)境）
// 下載 npm install vuex --save // 安裝 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
Vuex 圖示
Vuex 和單純的全局對(duì)象有以下兩點(diǎn)不同：
-
Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新。
-
不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用。
Store
????每一個(gè) Vuex 應(yīng)用的核心就是 store（倉(cāng)庫(kù)）。“store” 基本上就是一個(gè)容器，它包含著你的應(yīng)用中大部分的狀態(tài) (state)。
State
????驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源，用于保存所有組件的公共數(shù)據(jù).。
Getter
????可以將 getter 理解為 store 的計(jì)算屬性, getters 的返回值會(huì)根據(jù)它的依賴(lài)被緩存起來(lái)，且只有當(dāng)它的依賴(lài)值發(fā)生了改變才會(huì)被重新計(jì)算。
Mutation
????mutations 對(duì)象中保存著更改數(shù)據(jù)的回調(diào)函數(shù),該函數(shù)名官方規(guī)定叫 type, 第一個(gè)參數(shù)是 state, 第二參數(shù)是payload, 也就是自定義的參數(shù)。mutation 必須是同步函數(shù)。mutations 對(duì)象里的方法需要使用 store.commit 調(diào)用
Action
????Action 提交的是 mutation 而不是直接變更狀態(tài)。action 可以包含任意異步操作。actions 對(duì)象里的方法需要使用 store.dispatch 調(diào)用。
????Action 函數(shù)接受一個(gè)與 store 實(shí)例具有相同方法和屬性的 context 對(duì)象，因此你可以調(diào)用 context.commit 提交一個(gè) mutation，或者通過(guò) context.state 和 context.getters 來(lái)獲取 state 和 getters。
Module
????由于使用單一狀態(tài)樹(shù)，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store 對(duì)象就有可能變得相當(dāng)臃腫。為了解決以上問(wèn)題，Vuex 允許我們將 store 分割成模塊（module）。每個(gè)模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割。
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="改變?yōu)?0" @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 項(xiàng)目中 vuex 的使用（兩種）
- 把 vuex 寫(xiě)在 main.js 文件里
import Vue from 'vue'import App from './App'import router from './router'import Vuex from 'vuex'// 全局狀態(tài)管理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/>'})
????在組件中調(diào)用
<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>
- 把 vuex 分離出來(lái)
????在 src 目錄下創(chuàng)建一個(gè) 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 里寫(xiě)上如下代碼
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 } }}
????在組件里設(shè)置值
<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: '廈門(mén)' } ] } }, methods: { // 修改 ...mapMutations({ changeCity: "city/changeCity" }), // 第一種寫(xiě)法 handChangeCity(cityName) { this.changeCity(cityName) } // 第二種寫(xiě)法 不需要使用 ...mapMutations handChangeCity(cityName) { this.$store.commit('city/changeCity', cityName); } }}</script>
????在另一個(gè)組件里使用
<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>
