談一談對vuex的簡單理解

背景

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真的是特麼太好用了，可是個人狀態管理就是一把梭，我選擇用{};

溜了~~~~