談一談對vuex的簡單理解

特立獨爬的蝸牛發表於2018-06-21
Vue

背景

vue全家桶對我來說，已經多多少少用了快一年了，但是每次用到一些東西總是需要去查，總是不能很確定，加上灑家也不是一直連續用vue，導致我每次學會的的東西，過段時間在用的時候還需要重新查文件，這讓我感覺十分困擾，所以我覺把整個學過的東西系統性的整理出來應該會有所幫助，希望自己以後能夠堅持吧。

安裝vuex

安裝 Vuex

(前提是已經前提是已經用Vue腳手架工具構建好專案）

npm install vuex --save

  • 新建一個資料夾vuex，在資料夾裡面新建store.js，並在檔案中引入vuex
.
  import Vue from 'vue'
  import Vuex from 'vuex'
  Vue.use(Vuex)

複製程式碼

通過上面的步驟，vuex就算是安裝註冊成功了，下面就可以用vuex搞事情了

    import store from './vuex/store'
複製程式碼
  • 最後我們需要例項化vue物件時加入store物件
    .
     new Vue({
      el: '#app',
      router,
      store,//使用store
      template: '<App/>',
      components: { App }
    })
複製程式碼

完成以上的工作，下面我們就可以做個屬於自己的小demo了

第一個demo

  • 在 store.js檔案裡
 const state = {
    count:1
 }
 
 const mutations = {
     add(state){
         state.count++;
     },
     reduce(state){
         state.count--;
     }
 };
 const getters = {
     isLogin:state =>{
         return state.count
     }
 };
 const sctions = {};
 
//基本格式為    
 export default new Vuex.Store({
        state，
        getters，
        mutations
  });

複製程式碼

用export default 封裝好store物件，以便外部使用

由於我暫時感覺還用不到 actions，所以就等以後用到了再來補充吧

下面就是在元件內使用的方法了，

  • 在components資料夾下新建一個count.vue
<template>
    <div>
        <h2>{{msg}}</h2>
        <hr/>
        <h3>{{count}}</h3>
        <button @click="add">+</button>
        <button @click="reduce">-</button>
    </div>
</template>
<script>
    import store from '@/vuex/store'
    import {mapGetters} from 'vuex';
    export default{
        data(){
            return{
                msg:'Hello Vuex',

            }
        },
        computed:{
            count(){
                return this.$store.state.count;
            },
            isLogin(){
                return this.$store.getter.isLogin;
            }
            
        },
        methods:{
            add(){
                $store.commit('add')
            },
            reduce(){
                $store.commit('reduce')
            }
        }
        
    }
    </script>

複製程式碼

這應該算是最簡單的一個 例子了，

--- 接下來我來詳細闡述一下 mutations 和getters的使用`；

mutations

 const mutations={
        add(state){
            state.count+=1;
        },
        addNumber(state,n){
            state.count +=n;
        }
    }

複製程式碼

這裡的mutations是固定的寫法，意思是改變的,store裡面的數僅能通過mutations裡面的方法改變,但是必須是同步的，如果這裡面出現 非同步的邏輯會出現在unexpected fault,如果要是用非同步的邏輯，可以寫在actions裡面，用它處理完後再出發mutations來改變狀態

說了這麼多，我們最關心的肯定是在元件裡面怎麼用，接下來就看一看，我們費了那麼大的勁兒，就是為了最後食用我們之前辛勤耕耘的果實了。

store訪問狀態物件

const state ,這個就是我們說的訪問狀態物件，他就是我們spa（單頁面應用程式）中的共享值。

  • 通過computed的計算屬性賦值

computed屬性可以在輸出前，對state.js的值進行改變，我們就裡利用這種特性把store.js中的state賦值給我們模板中的data值 多說無益，看程式碼

computed:{
    yourdata(){
        return this.$store.state.count
    }
}
複製程式碼

要注意一定要寫this要不然找不到$store的，這種寫法雖然好理解，但是寫起來麻煩，因此我們可以利用mapState的對映方法，來是我們的程式碼簡潔，方便日後的維護。

  • 通過mapState的物件賦值

首先引入mapState

import {mapState} from 'vuex'
複製程式碼

然後還在computed計算屬性裡寫如下程式碼：

 computed:mapState({
    count:state=>state.count  //理解為傳入state物件，修改state.count屬性
     })
複製程式碼
  • 或者
  computed:{
      ...mapState(['state1','state2','state3'])
  }

複製程式碼

再看下state的兄弟，getters

getters

getters 可以說是相當於 vue中的 computed，是依賴於 state裡面的值

  getters:{
      isLogin:state =>{
          return  Boolean(state.stateValue);
      }
  }
複製程式碼

使用起來 和 state十分的像，如下：

    computed:{
        isLogin(){
            return this.$store.getters.isLogin;
        }
    }

複製程式碼

如果多的話可以引入 mapGetters模組，如下：

   import {mapGetters} from 'vuex';
   
   <!--在computed裡-->
   
   computed:{
       ...mapGetters(["isLogin"])
   }
複製程式碼

其實我們還可以 用 mapMutations 來對映我們的mutation，如下

在store.js檔案中寫入

 export default new Vuex.Store({
        state:{
            count:1
        },
        mutations:{
            add(state){
                state.count++;
            }
            addNumber(state,n){
                state.count += n;
            }
        }
  });

複製程式碼

然後我們在元件中使用可以直接這樣搞

在testComponent.vue檔案中

    import {mapMutations} from 'vux';
    
   methods:{
       ...mapMutations([
       
       'add',//把 this.add() 對映為 this.$store.commit('add');
       
       'addNumber' // 將 this.addNumber(n)對映為 this.$store.commit('addNumber',n);
       ]),
       
       ...map({
           justAdd:'add' //將 this.justAdd()對映為 this.$store.commit('add');
       })
   }
    
複製程式碼

終於把自己的第一篇文件（在掘金裡面）寫完了，作為一個經驗不足的小菜鳥，希望能夠幫到那些剛入門的，還望各路神仙輕噴。

last but not least

vuex真的是特麼太好用了，但是我的狀態管理就是一把梭，我選擇用{};

溜了~~~~

相關文章