vue學習 之 vuex安裝及使用

1.安裝  vuex

npm install vuex --save

2.vuex理解

官方解釋：vuex是一個專為vue.js應用程序開發的 狀態管理模式。它采用集中式存儲管理應用的所有的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

 

我的理解：可以理解為是一個  全局變量

 

例如： 模塊a / 模塊b。

我想 模塊b獲取模塊a的數據。

方法1: 用組件之間通訊。這樣寫很麻煩，並且寫着寫着，估計自己都不知道這是啥了，很容易寫暈。

方法2: 我們定義 全局變量。模塊a的數據 賦值給全局變量 x。然后 模塊b 獲取x。這樣我們就很容易獲取到數據

 

我們把模塊a 的數據叫 state。全局變量叫store。模塊b 叫data

 

Getter 是一個純函數，用於接收state 參數。返回你需要取的值

mutation  是對  state 進行修改

action  處理數據，對處理的數據 返回給 mutation 從而對 state 進行修改。

 

 

什么時候用vuex 呢？

 

當你連自己寫的代碼都看不懂的時候。搞不懂組件之間是怎么傳值。這個時候就需要用vuex

 

3. 使用vuex

再main.js 中注入 vuex

import Vuex from 'vuex'
Vue.use(Vuex)

在src 下創建文件夾store；創建store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state:{
    count:0
  },
  mutations:{
    increment:state => state.count ++,
    decrement:state => state.count --,
  }
})
//簡單的計數

　　

在 main.js 中導入

import store from './store/store'
//實例化 store
new Vue({
  el: '#app',
  store,
  router,
  template: '<App/>',
  components: { App }
})

結下了就可以直接在 其他視圖中調用  方法了

新建 demo.vue 文件

<template>
    
       <div>
               999
               {{ count }}
               <p>
                <button @click="increment">+</button>
                <button @click="decrement">-</button>
              </p>
               
       </div>
  
</template>
<script type="text/javascript">
    export default{
        name:'sildebar',
        data(){
            return{

            }
        },
        methods:{
            increment(){
              this.$store.commit('increment')
            },
            decrement(){
              this.$store.commit('decrement')
            }
        },
        computed:{
            count(){
                return this.$store.state.count
            },
        }


    }

</script>

 

 vuex 核心倉庫是store（state,mutations,actions,getter,modules）。

1.  action 提交mutation,而不是直接更改狀態
2. action 可以包括異步操作，mutation只能同步
3. modules  將store分割成模塊（modules）,每個模塊擁有自己的(state,mutations,actions,getter);方便維護
4. store 改變狀態時通過 （commit） mutations

action  可異步操作

 首先要介紹一下 axios。從2.0以后 不再更新 vue-resource 。官網推薦使用axios。

安裝

cnpm install axios -S

在main.js 中引入

import axios from 'axios'

使用

Vue.prototype.$ajax = axios
//在組件中這樣使用
this.$http.get()
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});