這篇文章將為大家詳細(xì)講解有關(guān)vue中的vuex是什么意思，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司憑借在網(wǎng)站建設(shè)、網(wǎng)站推廣領(lǐng)域領(lǐng)先的技術(shù)能力和多年的行業(yè)經(jīng)驗(yàn)，為客戶提供超值的營(yíng)銷型網(wǎng)站建設(shè)服務(wù)，我們始終認(rèn)為：好的營(yíng)銷型網(wǎng)站就是好的業(yè)務(wù)員。我們已成功為企業(yè)單位、個(gè)人等客戶提供了成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作服務(wù)，以良好的商業(yè)信譽(yù)，完善的服務(wù)及深厚的技術(shù)力量處于同行領(lǐng)先地位。

概念

????Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。

安裝

1. HTML 中使用 script 標(biāo)簽引入

2. 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ù)）?！皊tore” 基本上就是一個(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)，且只有當(dāng)它的依賴值發(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 的使用

    
    {{this.$store.state.count}}
    
    {{this.$store.getters.synchro}}
    

Vue 項(xiàng)目中 vuex 的使用（兩種）

1. 把 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: ''})

????在組件中調(diào)用

2. 把 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: ''})

????在 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è)置值

????在另一個(gè)組件里使用

關(guān)于“vue中的vuex是什么意思”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。