vue.js中学习使用Vuex详解教你快速入门

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

let selectModule = {
    state: {
        title: '打印title',
        list: []
    },
    mutations: {
        changeTitle(state, payload) {
            state.title = payload.title
        },
        changeList(state, list) {
            state.list = list;
        }
    },
    actions: {
        getListAction({
            commit
        }) {
            // 发送请求
            axios.get('http://easy-mock.com/mock/594f5d4b9adc231f3569be76/list/list')
                .then((data) => {
                    commit("changeList", data.data); // 拿到数据后，提交mutations，改变状态
                })
                .catch((error) => {
                    console.log(error)
                })
        }
    }
};

// this.$store.state.title
// this.$store.state.selectModule.title

// 定义一个容器
let store = new Vuex.Store({
    state: { //初始化状态
        count: 100,
        sum: 99,
        isShow: true
    },
    getters: { //类似计算属性
        filterCount(state) {
            return state.count >= 120 ? 120 : state.count;
        },
        sumGet(state) {
            return state.sum >= 200 ? 200 : state.sum
        }
    },
    mutations: { //payload接受页面事件交互传过来的参数值
        addIncrement(state, payload) {
            state.count += payload.n;
        },
        deIncrement(state, payload) {
            state.count -= payload.de;
        },
        sumFn(state, payload) {
            state.sum += payload.add;
        }
    },
    actions: {
        addAction({
            commit,
            state,
            rootState,
            dispatch,
            getters
        }, payload) {
            console.log('state', state)
            console.log('rootState', rootState)
            setTimeout(() => {
                // 改变状态，提交mutations
                commit("addIncrement", payload)
                dispatch("textAction", {
                    test: '异步回调拿到的参数'
                })
            }, 1000)
        },
        textAction(context, options) { //接收上面dispatch提交过来的参数
            console.log(options) //相当于一个异步操作里的回调函数
        }
    },
    modules: { //modules：多个store模块集合
        selectModule
    }
})
export default store

import {
    mapState,
    mapGetters,
    mapActions,
    mapMutations
} from 'vuex'

export default {
    computed: {
        ...mapGetters({
            num2: 'filterCount', //取到计算属性里的值
            sum1: 'sumGet'
        }),
        ...mapState(['count', 'sum'])
    },
    mounted() {
        console.log(this.$store.state.selectModule.title)
    },
    methods: {
        ...mapActions({ //异步action
            addHandle: 'addAction'
        }),
        ...mapMutations({ //同步
            deHandle: 'deIncrement',
            sumFn: 'sumFn'
        })
    }
}

<template>
  <div>
    <h2>简易加法计算器</h2>
    <div>
      <input type="button" value="-" @click="deHandle({de:5})" />
      <span>{{count}}</span>
      <input type="button" value="+" @click="addHandle({n:1})" />
      <p>{{num2}}</p>
      <span>点击</span>
      <button @click="sumFn({add:20})">{{sum}}</button>
      <p>我被限制了大小不超过200-----------{{sum1}}</p>
      <p>{{$store.state.count}}</p>
      <!-- 另一种获取vuex数据的方式 -->
    </div>
  </div>
</template>