關於Vuex的理解

由於最近公司有用到Vuex,就查詢了一些關於Vuex的相關資料（借鑑網上資料）加上自己理解，總結了自己對Vuex的一些理解。官網解釋： Vuex 是一個專為 Vue.js 應用程式開發的狀態管

頂層倉庫。

複製程式碼

1.安裝Vuex

npm install vuex --save複製程式碼

2.在src的統計目錄下建一個名字為store的資料夾，在store的資料夾中建一個名為index.js的檔案

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({   name: "store",   state: {      counte: 1   }})  //匯出複製程式碼

3.在main.js中引入

在全域性引入之後，就能夠在全域性使用this.$store.state來獲取state中的內容了。如

console.log(this.$store.state.counte) //1

import store from "./store/index.js";//引入store
複製程式碼

new Vue({  el: "#app", 
 router, 
 store, //全域性注入
 template: "<App/>", 
 components: {    App  } });複製程式碼

4.getter監聽state的變化

做完上面的步驟，你已經可以用this.$sore.state.counte來獲取state裡面的資料的值了，但是並不能實時的更新state的資料，Vuex官方提供了一個getters，與computed一樣，來監聽state相關資訊的變化。

import Vue from 'vue';
import Vuex from 'vuex'Vue.use(Vuex);
//匯出export default new Vuex.Store(
{name: "store",
  state:{heser: '',//初始值
 footer: ''    }, 
//負責動態監聽state的變化   
 gettes: {        //函式的名字隨便起，主要用來承載state的值HeaderState(state) {
 return state.heser},
FooterState(state) {return state.footer}}})

複製程式碼

5.mutation 用來改變初始值

```import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
//匯出export default new Vuex.Store({
            name: "store",
            state: {   
            heser: '',//初始值  
            footer: '',  
            num: 0
            },            //負責動態監聽state的變化
              gettes: {    //函式的名字隨便起，主要用來承載state的值
                     HeaderState(state) {        return state.heser    }, 
                     FooterState(state) {        return state.footer    },    
                     changeNum(state) {        return state.num    }
          },
                       
   //負責改變state的初始值
    mutations: {
        showheader(state) {
            state.heser = true;
        },
        hideheader(state) {
            state.heser = false;
        },
        //payload是引數
        changeNumstate(state, payload) {
            state.num = state.num + payload
        }
    },
})

 6.action 處理非同步請求
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);
//匯出
export default new Vuex.Store({
    name: "store",
    state: {
        heser: '',//初始值
        footer: '',
        num: 0
    },
    //負責動態監聽state的變化
    gettes: {
        //函式的名字隨便起，主要用來承載state的值
        HeaderState(state) {
            return state.heser
        },
        FooterState(state) {
            return state.footer
        },
        changeNum(state) {
            return state.num
        }
    },
    //負責改變state的初始值
    mutations: {
        showheader(state) {
            state.heser = true;
        },
        hideheader(state) {
            state.heser = false;
        },
        //payload是引數
        changeNumstate(state, payload) {
            state.num = state.num + payload
        }
    },
    //此時，在元件內就可以通過this.$store.state.commit("showheader")獲取state倉庫的值了
    //action進行非同步處理
    actions: {
        showheaders(state){
            state.commit('showheader')
        },
        //函式名可以隨便起，但是commit的引數要和mutations的函式名稱相同
        changeNum(state,num){
            state.commit('changeNumstate',num)
        },
    }
//   此時在元件內部，可以通過this.$stroe.dispatch("showheaders")獲取state的值 this.$store.changeNum("changeNum",5)來更改state的值
})
     複製程式碼

複製程式碼

關於Vuex的理解

相關文章