vue經常使用操做及學習筆記（Vuex）

Vuex 是什麼？

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理器，採用 集中式存儲 管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

Vue核心概念

State

Vuex store實例的根狀態對象，用於定義共享的狀態變量。

Getter

讀取器，外部程序經過它獲取變量的具體值，或者在取值前作一些計算（能夠認爲是store的計算屬性）

Mutation

修改器，它只用於修改state中定義的狀態變量。

Action

動做，向store發出調用通知，執行本地或者遠端的某一個操做（能夠理解爲store的methods）

Module

vuex在vue-cli中的應用

第一步：npm下載vuex資源包：

npm install vuex -S

第二步：在 src 下建立文件夾，在 src 下建立 store.js ，官方推薦項目結構

store.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './store/getters' // 導入響應的模塊，*至關於引入了這個組件下全部導出的事例
import * as actions from './store/actions'
import * as mutations from './store/mutations'
Vue.use(Vuex)

// 首先聲明一個須要全局維護的狀態 state,好比 titelName
const state = {
  titelName: '小A的大標題' // 默認值
  // id: xxx  若是還有全局狀態也能夠在這裏添加
  // name:xxx
}
export default new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production', //在嚴格模式下，不管什麼時候發生了狀態變動且不是由 mutation 函數引發的，將會拋出錯誤。這能保證全部的狀態變動都能被調試工具跟蹤到。不要在發佈環境下啓用嚴格模式以免性能損失！
  state,    // 共同維護的一個狀態，state裏面能夠是不少個全局狀態
  getters,  // 獲取數據並渲染
  actions,  // 數據的異步操做
  mutations  // 處理數據的惟一途徑，state的改變或賦值只能在這裏
})

getter.js 文件

// 獲取最終的狀態信息
export const titelName = state => state.titelName

actions.js 文件

// 給action註冊事件處理函數。當這個函數被觸發時候，將狀態提交到mutations中處理
export function modifyAName({ commit }, name) { // commit 提交；name即爲點擊後傳遞過來的參數，此時是 'A餐館'
    return commit('modifyAName', name)
}
// export const modifyAName = ({commit},name) => commit('modifyAName', name)
export const modifyBName = ({ commit }, name) => commit('modifyBName', name)

mutations.js 文件

// 提交 mutations是更改Vuex狀態的惟一合法方法
export const modifyAName = (state, name) => {
    state.titelName = name // 把方法傳遞過來的參數，賦值給state中的titelName
}
export const modifyBName = (state, name) => {
    state.titelName = name
}

router.js 文件

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import componentA from './components/componentA.vue'
import componentB from './components/componentB.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    },
    {
      path: '/componentA',
      name: 'componentA',
      component: componentA
    },
    {
      path: '/componentB',
      name: 'componentB',
      component: componentB
    },
  ]
})

componentA.vue 文件

<template>
      <div>
        <span>A頁面名字</span>
        <input type="text" name id v-model="titelName" @keydown="modifyAName(titelName)">
        <button @click="modifyAName('ssds')">改標題</button>
        <button @click="jump()">調到B頁面</button>
      </div>
    </template>
    
    <script>
    // import { mapActions, mapGetters } from "vuex";
    import { mapActions } from "vuex";
    export default {
      data() {
        return {};
      },
      methods: {
        ...mapActions(['modifyAName']), // 至關於this.$store.dispatch('modifyName'),提交這個方法
        jump() {
          this.$router.push("componentB");
        }
      },
      computed: {
        //注意 v-model v-if
        // ...mapGetters(["titelName"])
        titelName: {
          get() {
            return this.$store.state.titelName;
          },
          set(val) {
            console.log(val);
            this.$store.commit('modifyAName', val);
            // this.$store.dispatch('modifyAName');
            console.log(this.$store.state.titelName);
          }
        }
      }
    };
    </script>
    
    <style scoped>
    </style>

componentB.vue 文件

<template>
  <div>
    <span>B頁面名字</span>
    <input type="text" name id v-model="titelName" @keydown="modifyBName(titelName)">
    <button @click="jump()">調到A頁面</button>
  </div>
</template>

<script>
// import { mapActions, mapGetters } from "vuex";
import { mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  methods: {
    ...mapActions(
      //
      ["modifyBName"]
    ),
    jump() {
      this.$router.push("componentA");
    }
  },
  computed: {
    // ...mapGetters(["titelName"])
    titelName: {
      get: function() {
        return this.$store.state.titelName;
      },
      set: function(val) {
        this.$store.commit("modifyBName", val);
      }
    }
  }
};
</script>

<style scoped>
</style>

//第三步：在 src/main.js 中引入    
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({  
  router,
  store,
  render: h => h(App)
}).$mount('#app')

如何在組件中去使用vuex的值和方法

直接獲取、修改

//state
this.$store.state.count
//getter
this.$store.getters.count
//調用 action 修改 state 值，不帶參數
this.$store.dispatch('increment');
//調用 action 修改 state 值，帶參數
this.$store.dispatch('increment',{value :123});

經過 輔助函數 獲取、修改vuex

vuex提供了三種輔助函數用於獲取、修改vuex：
mapState、mapGetters、mapActions
即將vuex的變量或者方法映射到vue組件this指針上。

使用state獲取共享變量

<script type="text/javascript">
import { mapState } from 'vuex'
export default{
    computed : {
        ...mapState([
            'count',
            'buttonShow'
        ])
    }
}
</script>

使用getters獲取共享變量，

<script type="text/javascript">
import { mapGetters } from 'vuex'
export default{
    computed : {
        ...mapGetters([
            'count',
            'buttonShow'
        ])
    }
}
</script>

使用actions修改共享變量

<script type="text/javascript">
import { mapActions } from 'vuex'
export default{
    methods : {
        ...mapActions({increment:'increment',decrement:'decrement'}),
    }
}
</script>