Vuex-全局状态管理【简单小案例】
前言:
Vuex个人见解:
1、state :所有组件共享、共用的数据。理解为不是一个全局变量,不能直接访问以及操作它。
2、mutations : 如何操作 state 呢?需要有一个能操作state 的方法【mutations】,来操作它。mutations 只是定义了操作 state的方法,无法驱动。
3、actions : 使用actions 来驱动 mutations 中的操作 state的方法函数。使用,commit 来告诉 mutations ,执行操作,改变state的值。
src根目录
新建store.js
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { count: 1 } const mutations = { increment(state) { state.count++ }, decrement(state) { state.count-- } } const actions = { Actions_increment: ({ commit }) => { commit('increment') }, Actions_decrement: ({ commit }) => { commit('decrement') } } //模块到处,才能被引入使用 export default new Vuex.Store({ state, mutations, actions })
main.js引入
import Vue from 'vue' import App from './App.vue' import store from './store' Vue.config.productionTip = false new Vue({ store, render: h => h(App) }).$mount('#app')
新建一个 vue组件
<template> <div id="vuex"> <div class="container"> <h1>Vuex实例</h1> <hr /> <div class="input-group"> <span class="input-group-btn"> <button type="button" class="btn btn-success" @click="Actions_increment">增加</button> </span> <input type="text" class="form-control" v-model="count" /> <span class="input-group-btn"> <button type="button" class="btn btn-danger" @click="Actions_decrement">减少</button> </span> </div> </div> </div> </template> <script> import { mapActions, mapState } from "vuex" export default { methods: { ...mapActions(["Actions_increment", "Actions_decrement"]) }, computed: { ...mapState([ 'count' ]) } } </script> <style> </style>
效果图: