Vue--vuex狀態管理-多界面狀態管理$store.state.變量名稱 ---數據通觸發事件改變this.$store.commit

1.作用需求：多個狀態，在多個界面的共享問題

　　比如：用戶的登錄狀態，用戶名稱，頭像，地理位置信息等等

　　比如:商品的收藏，

這些狀態信息，我們都可以放在同一的地方，對他進行保存和管理，而且他們還是響應式的。

2.不同於父子組件之間的傳遞，應用於沒有直接的關系。

使用步驟：

一，Vuex是一個插件  下載: npm install vuex --save

二，創建一個文件夾store,倉庫的意思，或者叫vuex,不建議直接在main.js文件中引入。就像router路由一樣，這樣會使main文件越來越大。

三，store--index.js

import Vue from 'vue'

import Vuex from 'vuex'

//安裝插件

Vue.use(Vuex)

//創建對象

const store  = new Vuex.stroe({
// 數據
　　state: {
　　　　counter: 1000
　　},
})

//導出store對象

export default store

　　

四，main.js 

掛載一下-掛載之后，每個頁面都可以引用$store

import store from './store'

new Vue({

el: '#app',

stroe,

})

其他頁面引用會    <h2> {{ $store.state.counter }} </h2>

　　事件屬性引用<button @click=" $store.state.counter++ ">  標簽內不建議這么使用--響應式的意思-這個值所有頁面都會跟着改變。

　　官方建議：store--index.js---方便devtools工具監聽管理

import Vue from 'vue'

import Vuex from 'vuex'

//安裝插件

Vue.use(Vuex)

//創建對象

const store  = new Vuex.stroe({
// 數據
　　state: {
　　　　counter: 1000
　　},
　　mutations: {
　　　　//定義方法--編寫需求---來對應修改數據
　　　　increment(state){
　　　　　　state.conter++
　　　　},
　　　　decrement(state){
　　　　　　state.conter--
　　　　}
　　},
})

//導出store對象

export default store　　

其他頁面引用調用----出發事件，在方法中引用 this.$store.commit('事件名稱')

<button @click=" add "> +</button>

js---

export default {

.....

methods: {

　　add(){

　　　　this.$store.commit('increment')

　　}

}

}