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>