Vue之Vuex

一.什麼是vuex

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。簡單來說就是一個數據統一管理工具

二.如何使用vuex

   首先肯定是要下載vuex ,使用 npm install vuex --save-dev 下載 

   引入vuex,這裡我建議如果數據量不大把vuex所有的屬性單獨寫到一個js文件裡面,方便管理

import Vuex from 'vuex' //使用vuex

Vue.use(Vuex);//調用vuex

三.使用state創建數據,它用來創建一些初始數據,以方便各個組件之間來回調用

var state = {
    num:0
}

四.有時候我們需要從 store 中的 state 中派生出一些狀態,就使用getters

const getters={
    num: state => {
      return state.num
    }
  }

五.更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。Vuex 中的 mutations 非常類似於事件：每個 mutation 都有一個字元串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是我們實際進行狀態更改的地方，並且它會接受 state 作為第一個參數

const mutations = {
    addNum(state){
        state.num++
    }
}

六.Action 類似於 mutation，不同在於：1.Action 提交的是 mutation，而不是直接變更狀態。2.Action 可以包含任意非同步操作

const actions = {
    addNum({commit}){
        commit('addNum')
    }
}

七.導出

export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

七.在main.js中引入vuex

import store from './vuex'  //這個vuex為你的寫vuexjs文件

new Vue({
  store,
  el: '#app',
  render: h => h(App)
})

八.在vue組件中使用vuex

import {mapGetters,mapActions} from 'vuex'

export default {
        data(){
            return {
            }
        },
        computed:{
            ...mapGetters([
                'num'
            ]),
            
        },
        methods:{
            ...mapActions([
                'addNum'
            ])
        }
        
    }