vue vuex

1.vuex 是一個專門爲vue.js應用程序開發的狀態管理模式（ 通常由 main.js 引入，是全局數據：用於組件間通訊的 共享數據）

2. 關鍵對象

state：存儲狀態（變量）/ 狀態樹 （包含全部須要共享的資源）

getters：對數據獲取以前的再次編譯（簡化原始狀態數 state），能夠理解爲state的計算屬性 （也能夠直接操做 state 搞成一個計算屬性 ）

mutations：修改狀態，而且是同步的。在組件中使用$store.commit('',params)。  （更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation）

actions：異步操做。在組件中使用是$store.dispath('') 。  （action 的做用跟mutation的做用是一致的，提交mutation，從而改變state）

 

actions 相似於 mutation，不一樣在於：

actions 提交的是 mutation，而不是直接變動狀態，actions 能夠包含任意異步操做

 

3. 腳手架環境

vue init webpack app

cd app   

npm install vuex --save

npm run dev

src目錄下建立一個vuex文件夾，vuex文件夾下新建一個store.js文件

4. 關鍵代碼

入口文件 main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store' // 引入store

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

View Code

狀態管理配置文件 store.js  （當代碼量大時，能夠分別寫個.js文件再引入，如 state.js）

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

Vue.use(Vuex)

const state = {
    count: 0
}

const mutations = {
    mutationsAddCount:(state, n = 0) => {
        return state.count += n
    },
    mutationsReduceCount(state, n = 0) {
        return (state.count -= n)
    }
}

const actions = {
    actionsAddCount(context, n = 0) {
        console.log(context)
        return context.commit('mutationsAddCount', n)
    },
    actionsReduceCount({ commit }, n = 0) {
        return commit('mutationsReduceCount', n)
    }
}


const getters = {
    getterCount(state) {
        return state.count
    }
}

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

View Code

實例組件 HelloWorld.vue

<template>
  <div class="hello">
    <h3>{{$store.state.count}}</h3>
    <div>
      <button @click="handleAddClick(10)">增長</button>
      <button @click="handleReduceClick(10)">減小</button>
    </div>

    <div>異步操做</div>
    <div>
      <button @click="handleActionsAdd(20)">異步增長</button>
      <button @click="handleActionsReduce(20)">異步減小</button>
    </div>
    <h4>{{myCount}}</h4>
  </div>
</template>

<script>
export default {
  methods: {
    handleAddClick(n) {
      this.$store.commit("mutationsAddCount", n);
    },
    handleReduceClick(n) {
      this.$store.commit("mutationsReduceCount", n);
    },
    handleActionsAdd(n) {
      this.$store.dispatch("actionsAddCount", n);
    },
    handleActionsReduce(n) {
      this.$store.dispatch("actionsReduceCount", n);
    }
  },
  computed: {
    myCount() {
      return this.$store.getters.getterCount+10;
    }
  }
};
</script>

<style>
</style>

View Code

4.1   import { mapState, mapMutations, mapActions, mapGetters } from "vuex";   版本

HelloWorld.vue

<template>
  <div class="hello">
    <h3>{{mapCount}}</h3>
    <div>
      <button @click="handleAddClick(10)">增長</button>
      <button @click="handleReduceClick(10)">減小</button>
    </div>

    <div>異步操做</div>
    <div>
      <button @click="handleActionsAdd(20)">異步增長</button>
      <button @click="handleActionsReduce(20)">異步減小</button>
    </div>
    <h4>{{getterCount}}</h4>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
  methods: {
    ...mapMutations({
      handleAddClick: "mutationsAddCount",
      handleReduceClick: "mutationsReduceCount"
    }),
    ...mapActions({
      handleActionsAdd: "actionsAddCount",
      handleActionsReduce: "actionsReduceCount"
    })
  },
  computed: {
    //獲取store裏面的state值到本地
    ...mapState({
      mapCount: state => state.count
    }),
    //獲取store中的getter值
    // ...mapGetters({
    //   getterCount: 'getterCount' 
    // })
    ...mapGetters(['getterCount'])
  }
};
</script>

<style>
</style>

View Code

 

5. 參考連接

vuex 中文版

export  、 export default  區別