筆記整理：關於VUE插件--VueX篇

1、Vuex介紹

1.Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。簡單直白的理解：至關於全局變量，但和全局變量又有兩點不一樣。

（1）Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時，若 store 中的狀態變化，那麼相應的組件也更新。

（2）不能直接改變 store 中的狀態。改變 store 中的狀態的惟一途徑就是顯式地提交(commit) mutations。

2.中大型項目使用能很好解決組件間混亂的多層級數據傳遞通訊問題。

2、Vuex核心模塊

State 池 (數據源)
Getter 查 (獲取數據源的數據,至關於vue的computed)
Mutation 修改 (真正修改的動做 同步)
Action 觸發修改行爲(多配合異步使用)
Module 能夠擁有多個數據源(數據池)

3、demo示例

前言：示例是基於webpack 搭建的cli環境。

# 選webpack模板 搭建在一個叫pro_vuex的文件夾裏
$ vue init webpack pro_vuex

1.安裝vuex

# 進入項目安裝並保存到依賴上
$ npm i vuex -S

2.建獨立的狀態管理文件夾store; 建輸出js叫index.js

.
├── App.vue              //父組件
├── main.js              //入口文件
├── `store `             //狀態管理文件夾
|   ├── modules          //多個數據源(數據池) 
│   └── `index.js`    
├── components
│   └── HelloWorld.vue   //子組件
├── router               //路由
│   └── index.js
└── assets
    └── logo.png

3.引入調用插件

• 建立倉庫 /store/index.js
  import引入插件；Vue.use使用插件；new Vuex.Store 實例化一個Vuex對象；暴露出去

  import Vue from 'vue';
  import Vuex from 'vuex';
  Vue.use(Vuex);
  
  // 實例化Vuex，建立一個倉庫
  const store = new Vuex.Store({
      // 數據池
      state: {
          count: 0,
          author: 'tom'
      },
      // 能夠對數據操做後返回 至關於vue裏面的computed
      getters:{
          userName(state){
              return state.author +' hello';
          }
      },
      // 修改數據的方法 同步
      mutations: {
          // 修改數據的方法。 參數一固定state 後面隨意
          increment(state,num) {
              state.count+=num
          }
      },
      // 修改數據的異步 方法
      actions:{
          // 參數一 執行上下文
          incrementAction(context,num) {
              context.commit("increment",num); //等同於在組件裏面this.$store.commit("increment",18) 
          }
      }
  })
  
  // 暴露出去
  export default store

• 入口文件引入倉庫 main.js
  單頁面應用程序中 在入口文件引用，其下子組件就全都能獲取調用。

  import Vue from 'vue'
  import App from './App'
  import router from './router'
  
  import store from './store/index.js' // 引入倉庫
  
  Vue.config.productionTip = false
  
  new Vue({
    el: '#app',
    router,
    store, // 掛載倉庫  key和value同樣時 能夠簡寫
    components: { App },
    template: `<App/>`
  })

• 任意組件讀取修改倉庫 示例在components/HelloWorld.vue

  <template>
    <div class="hello">
      <h1>{{ msg }}</h1>
  
      <h4>年齡： {{my_age}} </h4>
      <h4>用戶名：{{name}} </h4>
      <h4>打招呼：{{userName}}</h4>
      <input type="button" @click="add_mutation" value="mutation方法修改年齡my_age">
      <br/>~~~~
      <input type="button" @click="add_action" value="action方法修改年齡my_age">
    </div>
  </template>
  
  <script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: '來自子組件的親切問候'
      }
    },
    computed:{
      my_age(){
        return this.$store.state.count
      },
      name(){
        return this.$store.state.author
      },
      userName(){
        return this.$store.getters.userName; //經過getters方法的 讀取也要區分處理
      }
    },
    methods:{
      add_mutation(){
        this.$store.commit("increment",18) //調用store/index.js裏面經過mutations定義的increment方法
      },
      add_action(){
        this.$store.dispatch("incrementAction",12);
      }
    }
  }
  </script>
  
  <style scoped>
  input {
    line-height: 1.6rem;
    margin: 10px;
  }
  </style>

  

4、VueX基礎用法說明

5、輔助函數

當一個組件須要獲取多個狀態時候，將這些狀態都聲明爲計算屬性會有些重複和冗餘。爲了解決這個問題，咱們能夠使用mapState輔助函數幫助咱們生成計算屬性。
mapState函數返回的是一個對象。

import { mapState } from "vuex";
computed: {
    ...mapState({
      author: state => state.author,
    })
}

mark一下 僅供參考 歡迎更正補充 Thanks

---

參考資料：
官網: https://vuex.vuejs.org/zh/
npm_vuex: https://www.npmjs.com/package...
source: https://github.com/Wscats/vue...