vue-vuex基本使用-單界面到多界面狀態管理的切換

？　　在之前的學習中，一個頁面的狀態管理是有三個步驟的，如下：

 

 

 　　現在，多界面間的狀態管理會更常見，由Vuex來管理和操作。

　

　　Vuex的基本使用步驟如下：

　　1. 下載Vuex插件

npm install vuex --save

　　2. src下創建store目錄(vuex的東西會放在該目錄下)，該目錄創建index.js，內容如下：

　　3. 在Index.js安裝Vuex，並創建Vuex.Store對象（並不是創建Vuex對象，而是Vuex中的Store對象）

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state:{
　　counter: 1000
},
  getters: {},
  mutations: {},
  actions: {},
  modules: {}
})

export default store

　　4. 在main.js的Vue實例使用store對象，如下：

 

 

 　　在Vue注冊了store對象，就想到於給Vue.prototype.$store進行賦值，到時候其他組件想要拿到該store對象，只要獲取$store即可

　　5. 隨便創建一個vue文件，嘗試獲取state的counter屬性值，如下：

<template>
  <div>
    <h1>我是首頁頁面</h1>
    <h2>{{$store.state.counter}}</h2>
  </div>
</template>

　　顯示結果如下：

 

 

 　　真的可以獲取到了，那能不能修改通過點擊事件去修改counter的值呢？如下：

<template>
  <div>
    <h1>我是首頁頁面</h1>
    <h2>{{$store.state.counter}}</h2>
    <button @click="$store.state.counter++">counter+1</button>
  </div>
</template>

　　經過測試，是可以這樣修改的。但是極其不建議這樣做，vue官方也不建議做。vue官方是可以讓我們去修改vuex中的狀態的，但得按照指定的流程和格式修改才行，下面是官方提供的修改vuex的流程：

 

 

 　　可能大家一眼看上去不是很清楚，下面解釋下

　　如果我們想要修改state，有兩種方式：

　　　　1. conpenents -> Mutations -> State

　　　　2. conpenents -> Actions -> Mutations -> State

　　可以看到兩種方式的區別只是有無Actions，而Mutations是必須存在的。也就是state的修改必須由Mutation來完成(這個步驟不需要我們做)，還有一個好處是Devtools(vue提供的一個瀏覽器插件)是用來監控Mutations，Mutations對state進行了怎樣的修改都會被記錄，在追蹤state狀態時很重要

　　那通過Mutation就可以完成了，為什么還要多個Action呢？是這樣的，Mutations中只能存在同步操作和代碼，像一些異步操作是不行的，Devtools也監控不到，因此異步操作的代碼就可以放在Actions來完成了。

　　實際上，上面的圖需要我們做的只有兩步，即 dispatch(發布)和 commit(提交)，像mutate不需要我們做。