vuex的學習筆記

時間 2019-11-21

標籤 vuex 學習筆記简体版

原文原文鏈接

什麼是Vuex？

vuex是一個專門爲vue.js設計的集中式狀態管理架構。狀態？我把它理解爲在data中的屬性須要共享給其餘vue組件使用的部分，就叫作狀態。簡單的說就是data中須要共用的屬性。javascript

引入Vuex（前提是已經用Vue腳手架工具構建好項目）

一、利用npm包管理工具，進行安裝 vuex。在控制命令行中輸入下邊的命令就能夠了。html

npm install vuex --save

要注意的是這裏必定要加上 –save，由於你這個包咱們在生產環境中是要使用的。vue

二、新建一個store文件夾（這個不是必須的），並在文件夾下新建store.js文件，文件中引入咱們的vue和vuex。java

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

三、使用咱們vuex，引入以後用Vue.use進行引用。python

Vue.use(Vuex);

經過這三步的操做，vuex就算引用成功了。vuex

四、在main.js 中引入新建的vuex文件npm

　　import store from './vuex/store'數組

五、再而後 , 在實例化 Vue對象時加入 store 對象 :babel

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

Demo

一、如今咱們store.js文件裏增長一個常量對象。架構

Vue.use(Vuex)

const state = {
  notes: [],
  activeNote: {},
   count:1
}

二、用export default 封裝代碼，讓外部能夠引用。

export default new Vuex.Store({
  state
})

三、新建一個vue的模板

 <template>
        <div>
            <h2>{{msg}}</h2>
            <hr/>
            <h3>{{$store.state.count}}</h3>
        </div>
    </template>
    <script>
        import store from './vuex/store'
        export default{
            data(){
                return{
                    msg:'Hello Vuex',

                }
            }
         
        }
    </script>

四、在store.js文件中加入兩個改變state的方法。

onst mutations={
        add(state){
            state.count+=1;
        },
        reduce(state){
            state.count-=1;
        }
    }

　　這裏的mutations是固定的寫法，意思是改變的，因此你先不用着急，只知道咱們要改變state的數值的方法，必須寫在mutations裏就能夠了。

五、在count.vue模板中加入兩個按鈕，並調用mutations中的方法。

<div>
        <button @click="$store.commit('add')">+</button>
        <button @click="$store.commit('reduce')">-</button>
    </div>

1、經過computed的計算屬性直接賦值

computed屬性能夠在輸出前，對data中的值進行改變，咱們就利用這種特性把store.js中的state值賦值給咱們模板中的data值。

computed:{
        count(){
            return this.$store.state.count;
        }
    }

　　如今store.js文件裏給add方法加上一個參數n。

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

 <p>
       <button @click="$store.commit('add',10)">+</button>
       <button @click="$store.commit('reduce')">-</button>
    </p>

　　在Count.vue裏修改按鈕的commit( )方法傳遞的參數，咱們傳遞10，意思就是每次加10.

2、經過mapState的對象來賦值

  import {mapState} from 'vuex';

 computed:mapState({
            count:state=>state.count  //理解爲傳入state對象，修改state.count屬性
     })

3、經過mapState的數組來賦值

 computed:mapState(["count"])

模板獲取Mutations方法

實際開發中咱們也不喜歡看到$store.commit( )這樣的方法出現，咱們但願跟調用模板裏的方法同樣調用。
例如：@click=」reduce」就和沒引用vuex插件同樣。要達到這種寫法，只須要簡單的兩部就能夠了：

  import { mapState,mapMutations } from 'vuex';

   methods:mapMutations([
            'add','reduce'
    ]),
或者
 methods:{
     ...mapMutations([
            'add','reduce'
    ]),
 }
button @click="reduce">-</button>

　　...三點解構賦值須要babel轉義，參考http://www.cnblogs.com/yiyi17/p/7762408.html

getters計算過濾操做

好比咱們如今要對store.js文件中的count進行一個計算屬性的操做，就是在它輸出前，給它加上100.咱們首先要在store.js裏用const聲明咱們的getters屬性。

 const getters = {
        count:function(state){
            return state.count +=100;
        }
    }

　　寫好了gettters以後，咱們還須要在Vuex.Store()裏引入，因爲以前咱們已經引入了state和mutations，因此引入裏有三個引入屬性。代碼以下，

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

　　在store.js裏的配置算是完成了，咱們須要到模板頁對computed進行配置。在vue 的構造器裏邊只能有一個computed屬性，若是你寫多個，只有最後一個computed屬性可用，因此要對上節課寫的computed屬性進行一個改造

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

　　你寫了這個配置後，在每次count 的值發生變化的時候，都會進行加100的操做。

actions異步修改狀態

actions和以前講的Mutations功能基本同樣，不一樣點是，actions是異步的改變state狀態，而Mutations是同步改變狀態。至於什麼是異步什麼是同步這裏我就不作太多解釋了，若是你不懂本身去百度查一下吧。

在store.js中聲明actions

 const actions ={
        addAction(context){
            context.commit('add',10)
        },
        reduceAction({commit}){
            commit('reduce')
        }
    }

在actions裏寫了兩個方法addAction和reduceAction，在方法體裏，咱們都用commit調用了Mutations裏邊的方法。細心的小夥伴會發現這兩個方法傳遞的參數也不同。

ontext：上下文對象，這裏你能夠理解稱store自己。
{commit}：直接把commit對象傳遞過來，可讓方法體邏輯和代碼更清晰明瞭。

模板中的使用

咱們須要在count.vue模板中編寫代碼，讓actions生效。咱們先複製兩個之前有的按鈕，並改爲咱們的actions裏的方法名，分別是：addAction和reduceAction。

<button @click="$store._actions.addAction">+</button>
<button @click="$store._actions.reduceAction">-</button>

　　或者

 <p>
      <button @click="addAction">+</button>
      <button @click="reduceAction">-</button>
    </p>

    methods:{
        ...mapMutations([  
            'add','reduce'
        ]),
        ...mapActions(['addAction','reduceAction'])
    },

增長異步檢驗

  setTimeOut(()=>{context.commit(reduce)},3000);
    console.log('我比reduce提早執行');

module模塊組

隨着項目的複雜性增長，咱們共享的狀態愈來愈多，這時候咱們就須要把咱們狀態的各類操做進行一個分組，分組後再進行按組編寫。那今天咱們就學習一下module：狀態管理器的模塊組操做。

聲明模塊組：

在vuex/store.js中聲明模塊組，咱們仍是用咱們的const常量的方法聲明模塊組。代碼以下:

 const moduleA={
        state,mutations,getters,actions
    }

　聲明好後，咱們須要修改原來 Vuex.Stroe裏的值：.

 export default new Vuex.Store({
        modules:{a:moduleA}
    })

在模板中使用

如今咱們要在模板中使用count狀態，要用插值的形式寫入

 <h3>{{$store.state.a.count}}</h3>

若是想用簡單的方法引入，仍是要在咱們的計算屬性中rutrun咱們的狀態。寫法以下：
 computed:{
        count(){
            return this.$store.state.a.count;
        }
    },