對vuex中store和$store的區(qū)別說明

更新時間：2020年07月24日 09:48:49 作者：行走的碎道

這篇文章主要介紹了對vuex中store和$store的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

這里寫自定義目錄標(biāo)題

<router-link to="/login">{{ $store.state.userName }}</router-link>
<router-link to="/login">{{ store.state.userName }}</router-link>
<router-link to="/login">{{ this.store.state.userName }}</router-link>
<router-link to="/login">{{ this.$store.state.userName }}</router-link>

1、$store 是掛載在 Vue 實例上的（即Vue.prototype），而組件也其實是一個Vue實例（所有組件都是實例，每個組件都是一個vue實例，所有的 Vue 組件都是 Vue 實例：一個 Vue 應(yīng)用由一個通過 new Vue 創(chuàng)建的根 Vue 實例，以及可選的嵌套的、可復(fù)用的組件樹組成，也就是說：組件放到根組件中使用）在組件中可使用 this 訪問原型上的屬性，template 擁有組件實例的上下文，可直接通過 {{ KaTeX parse error: Expected 'EOF', got '}' at position 22: …state.userName }̲} 訪問，等價于 script…store.state.userName。

2、store是掛載到vue上，為vue的根實例；store引入后被注入到vue上，成為vue的原型屬性，所以通過store是掛載到vue上，為vue的根實例；store引入后被注入到vue上，成為vue的原型屬性，所以通過store是掛載到vue上，為vue的根實例；store引入后被注入到vue上，成為vue的原型屬性，所以通過store.state和this.$store.state可以訪問。

補充知識：vue 的狀態(tài)管理vuex中store的使用

一、狀態(tài)管理（vuex）簡介

vuex是專為vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。vuex也集成刀vue的官方調(diào)試工具devtools extension，提供了諸如零配置的time-travel調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級調(diào)試功能。

二、狀態(tài)管理核心

狀態(tài)管理有5個核心，分別是state、getter、mutation、action以及module。分別簡單的介紹一下它們：

開始使用vuex，新建一個 sotre文件夾，分開維護 actions mutations getters

1、state

state為單一狀態(tài)樹，在state中需要定義我們所需要管理的數(shù)組、對象、字符串等等，只有在這里定義了，在vue.js的組件中才能獲取你定義的這個對象的狀態(tài)。

在store/index.js文件中新建vuex 的store實例

*as的意思是導(dǎo)入這個文件里面的所有內(nèi)容，就不用一個個實例來導(dǎo)入了。

import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters' // 導(dǎo)入響應(yīng)的模塊，*相當(dāng)于引入了這個組件下所有導(dǎo)出的事例
import * as actions from './actions'
import * as mutations from './mutations'
 
Vue.use(Vuex)
// 首先聲明一個需要全局維護的狀態(tài) state,比如 我這里舉例的resturantName
const state = {
  resturantName: '飛歌餐館' // 默認值
  // id: xxx 如果還有全局狀態(tài)也可以在這里添加
  // name:xxx
}
// 注冊上面引入的各大模塊
const store = new Vuex.Store({
  state,  // 共同維護的一個狀態(tài)，state里面可以是很多個全局狀態(tài)
  getters, // 獲取數(shù)據(jù)并渲染
  actions, // 數(shù)據(jù)的異步操作
  mutations // 處理數(shù)據(jù)的唯一途徑，state的改變或賦值只能在這里
})
 
export default store // 導(dǎo)出store并在 main.js中引用注冊。

另種封裝

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'
Vue.use(Vuex)
/* eslint-disable no-new */
const store = new Vuex.Store({
 modules: {
  user //包含state、actions、mutations 
 },
 getters
})
export default store

2、getter

getter有點類似vue.js的計算屬性，當(dāng)我們需要從store的state中派生出一些狀態(tài)，那么我們就需要使用getter，getter會接收state作為第一個參數(shù)，而且getter的返回值會根據(jù)它的依賴被緩存起來，只有g(shù)etter中的依賴值（state中的某個需要派生狀態(tài)的值）發(fā)生改變的時候才會被重新計算。

// 獲取最終的狀態(tài)信息

export const resturantName = state => state.resturantName

3、mutation

更改store中state狀態(tài)的唯一方法就是提交mutation，就很類似事件。每個mutation都有一個字符串類型的事件類型和一個回調(diào)函數(shù)，我們需要改變state的值就要在回調(diào)函數(shù)中改變。我們要執(zhí)行這個回調(diào)函數(shù)，那么我們需要執(zhí)行一個相應(yīng)的調(diào)用方法：store.commit。

// 提交 mutations是更改Vuex狀態(tài)的唯一合法方法
export const modifyAName = (state, name) => { // A組件點擊更改餐館名稱為 A餐館
  state.resturantName = name // 把方法傳遞過來的參數(shù)，賦值給state中的resturantName
}
export const modifyBName = (state, name) => { // B組件點擊更改餐館名稱為 B餐館
  state.resturantName = name
}

4、action

action可以提交mutation，在action中可以執(zhí)行store.commit，而且action中可以有任何的異步操作。在頁面中如果我們要嗲用這個action，則需要執(zhí)行store.dispatch

// 給action注冊事件處理函數(shù)。當(dāng)這個函數(shù)被觸發(fā)時候，將狀態(tài)提交到mutations中處理
export function modifyAName({commit}, name) { // commit 提交；name即為點擊后傳遞過來的參數(shù)，此時是 'A餐館'
  return commit ('modifyAName', name)
}
export function modifyBName({commit}, name) {
  return commit ('modifyBName', name)
}
 
// ES6精簡寫法
// export const modifyAName = ({commit},name) => commit('modifyAName', name)

5、module

module其實只是解決了當(dāng)state中很復(fù)雜臃腫的時候，module可以將store分割成模塊，每個模塊中擁有自己的state、mutation、action和getter。

6.在main.js中導(dǎo)入 store實例

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
 
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store, // 這樣就能全局使用vuex了
 components: { App },
 template: '<App/>'
})

7.對于1、3、4可以整合一個store/modules/user 的js進行配合封裝

const user = {
 state: {
  resturantName: '飛歌餐館' // 默認值
  // id: xxx 如果還有全局狀態(tài)也可以在這里添加
  // name:xxx
 },
 
 mutations: {
  // 提交 mutations是更改Vuex狀態(tài)的唯一合法方法
  modifyAName : (state, name) => { // A組件點擊更改餐館名稱為 A餐館
   state.resturantName = name // 把方法傳遞過來的參數(shù)，賦值給state中的resturantName
  },
  modifyBName : (state, name) => { // B組件點擊更改餐館名稱為 B餐館
   state.resturantName = name
  }
 },
 actions: {
  // 給action注冊事件處理函數(shù)。當(dāng)這個函數(shù)被觸發(fā)時候，將狀態(tài)提交到mutations中處理
  modifyAName({commit}, name) { // commit 提交；name即為點擊后傳遞過來的參數(shù)，此時是 'A餐館
   return commit ('modifyAName', name)
  },
  modifyBName({commit}, name) {
   return commit ('modifyBName', name)
  }
 
  // ES6精簡寫法
  //modifyAName:({commit},name) => commit('modifyAName', name)
 
 }
}
export default user

8.在組件A中，定義點擊事件，點擊修改名稱，并把名稱在事件中用參數(shù)進行傳遞。

...mapactions 和 ...mapgetters都是vuex提供的語法糖，在底層已經(jīng)封裝好了，拿來就能用，簡化了很多操作。

其中...mapActions(['clickAFn']) 相當(dāng)于this.$store.dispatch('clickAFn'，{參數(shù)})，mapActions中只需要指定方法名即可，參數(shù)省略。

...mapGetters(['resturantName'])相當(dāng)于this.$store.getters.resturantName

A組件同理

<template>
 <div class="componentsA">
   <P class="title">組件A</P>
   <P class="titleName">餐館名稱：{{resturantName}}</P>
   <div>
      <!-- 點擊修改 為 A 餐館 -->
     <button class="btn" @click="modifyAName('A餐館')">修改為A餐館</button>
   </div>
   <div class="marTop">
     <button class="btn" @click="trunToB">跳轉(zhuǎn)到B頁面</button>
   </div>
 </div>
</template>
 
<script>
import {mapActions, mapGetters} from 'vuex'
export default {
 name: 'A',
 data () {
  return {
  }
 },
 methods:{
   ...mapActions( // 語法糖
     ['modifyAName'] // 相當(dāng)于this.$store.dispatch('modifyName'),提交這個方法
   ),
   trunToB () {
     this.$router.push({path: '/componentsB'}) // 路由跳轉(zhuǎn)到B
   }
 },
 computed: {
   ...mapGetters(['resturantName']) // 動態(tài)計算屬性，相當(dāng)于this.$store.getters.resturantName
 }
}
</script>

B組件同理

<template>
 <div class="componentsB">
   <P class="title">組件B</P>
   <P class="titleName">餐館名稱：{{resturantName}}</P>
   <div>
     <!-- 點擊修改 為 B 餐館 -->
     <button class="btn" @click="modifyBName('B餐館')">修改為B餐館</button>
   </div>
   <div class="marTop">
     <button class="btn" @click="trunToA">跳轉(zhuǎn)到A頁面</button>
   </div>
 </div>
</template>
 
<script>
import {mapActions, mapGetters} from 'vuex'
export default {
 name: 'B',
 data () {
  return {
  }
 },
 methods:{
   ...mapActions( // 語法糖
     ['modifyBName'] // 相當(dāng)于this.$store.dispatch('modifyName'),提交這個方法
   ),
   trunToA () {
     this.$router.push({path: '/componentsA'}) // 路由跳轉(zhuǎn)到A
   }
 },
 computed: {
   ...mapGetters(['resturantName']) // 動態(tài)計算屬性，相當(dāng)于this.$store.getters.resturantName
 }
}
</script>

多組件的中狀態(tài)改變之dispatch 和 commit 的用法和區(qū)別

vue store存儲commit 和dispatch

dispatch：含有異步操作，例如向后臺提交數(shù)據(jù)，寫法： this.$store.dispatch('action方法名',值)

commit：同步操作，寫法：this.$store.commit('mutations方法名',值)

以上這篇對vuex中store和$store的區(qū)別說明就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: