vuex 使用

Vuex 學習筆記

• store.js 存儲全局的狀態數據，在整個vue的全部組件裏面均可以訪問 對應原生的 data

const state = {
    count: 1
}

export default state;

• mutations.js 定義的是一系列操做state裏面數據的方法 （ 須要注意的是參數的寫法 ）相似於原生裏面的methods

const mutations = {
        // state就是store裏面的參數  num傳遞過來的參數
        add(state, num) {
            state.count = state.count + num;
        },
        reduce(state) {
            state.count--;
        }
    };
    export default mutations;

• getters 對state裏面數據的一個過濾處理 對應原生的 computed 例如 當咱們改變state裏面的數據的時候，會監聽這個數據的變化，返回一個新的數據

const getters = {
    countDouble(state) {
        return state.count % 2 ? '奇數' : '偶數'
    }

}
export default getters;

當咱們經過mutations裏面的定義的方法改變state的時候，會實時的更新這個數是奇數仍是偶數

• action 項目中，大多數狀況都是異步的操做,怎麼處理異步的操做

addActions(context, params) {
        /**
         * context 裏面的參數 
         * { dispatch commit getters state }
         * params 就是調用 addActions 裏面的參數 就是這裏的 addActions(100) 參數就是 100
     */
        console.log(context, params)
        fetch('https://api.myjson.com/bins/y10ma').then(data => {
            return data.json()
        }).then(data => {
            // 異步操做 add 方法就是
            context.commit('add', data.num)
        });

    },
    
    // 這個地方就是解構賦值
    reduceActions({ commit }) {
        console.log(commit);
        commit('reduce')
    }
}

export default actions;

• 將全部的文件整合進入 store文件夾下面的index.js 裏面

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

import state from './store'; //全局的state倉庫
import mutations from './mutations'; // 全局的 mutations 定義全局的事件
import getters from './getters'; // 全局的 computed 經過監聽 state 裏面值得變化 返回須要的數據類型
import actions from './actions' // 全局的異步操做 
const store = new Vuex.Store({
    state, // 定義狀態
    mutations,
    getters,
    actions
});

export default store;

• 最後一步 就是須要掛載到全局的vue上 main.js文件

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false

import store from './store/index';

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    template: '<App/>'
})

如何在組件當中 調用上面的一系列的方法。

<template>
  <div>
    <!-- 這個裏面的寫法能夠省略掉this -->
    <h2> ...mapState(['count']) 獲取state 裏面的數據 </h2>
    <div>$store.state.count => {{ $store.state.count }}</div>
    <div>{{ $route.name }}</div>
    <div>mapState => {{count}}</div>
    <div>mapState => {{c}}</div>
    
    <!-- getters 就是vue 裏面的 computed屬性 當數據發生改變的時候 會通知getters裏面定義的數據  -->
    <h2>getters 的使用 注意定義 和 mapGetters 的使用方式</h2>
    <div> $store.getters.countDouble 訪問=> {{ $store.getters.countDouble }}</div>
    <div> ...mapGetters(['countDouble'])訪問=> {{countDouble }}</div>

    <h2> 時間都是定義在mutations裏面 ...mapMutations(['add']) 參數傳遞: @click="add(100)"</h2>
    <button @click="add(100)">+</button>
    <button @click="reduce">-</button>
    
    <h2> 如何處理異步 actions 處理異步的操做 </h2>
     <button @click="addActions(1000)">異步增長</button>
    <button @click="reduceActions">異步減小</button>
  </div>
</template>

<script>
/**
 * mapState 快速獲取到 state 裏面的值
 * mapMutations 映射 mutation 中定義的方法
 * mapGetters 映射 getters 裏面定義的一系列值
 * mapActions 映射 異步操做
 */
import {mapState, mapMutations,mapGetters,mapActions} from 'vuex';
export default {
  created(){
    console.log(this.$store); // vuex 裏面的所用方法屬性都會被掛載到vue的實例上面 這個this 指的就是vue的實例
    console.log(this.$route); // router 上面的全部屬性 一樣會直接掛載到 $route 上面
  },
  // 經過computed 獲取到數據 
  computed: {
    // 直接訪問 獲取state裏面的數據
    count(){ 
      return this.$store.state.count
    },
    ...mapState(['count']), // 最經常使用的獲取 Vuex裏面state的數據 1
    ...mapState({ // 獲取 state 裏面的數據 2
      c:state => state.count
    }),
    // 獲取getters裏面的數據
    ...mapGetters(['countDouble'])
  },
  methods:{
    // 這樣映射裏面的 mutations 方法的時候 參數傳遞 須要在 @click="add(100)" 100就是裏面傳遞的參數
    ...mapMutations(['add','reduce']), // 最多見的寫法 常規方法
    ...mapActions(['addActions','reduceActions']),
    // add(){
    //   // 傳遞事件
    //   this.$store.commit('add',10);
    // },
    // reduce(){
    //   this.$store.commit('reduce');
    // }
  }
}
</script>

<style>

</style>