vuex
一.什么是vuex
Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也集成到Vue的官方调试工具devtools扩展,提供了诸如零配置的time-travel调试,状态快照,导入等高级调试功能。
二.做了一个官方点击加次数的经典案例
index.js和count.vue代码如下
index.js
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ // 数据都放在state里面 state: { count:0 //初始化数据 }, // 同步的一些操作在这里面 mutations: { ADD(state){ state.count++ }, JIAN(state){ state.count-- } }, actions: { actionAdd({commit}){ commit('ADD') }, act({commit}){ commit('JIAN') } }, getters:{ isodd(state){ return state.count % 2===0?'偶数':'奇数' } } })
count.vue
注释的代码是另外两种方法获取mutations里面方法的方法
<template> <div> <p>总共点击了{{count}}次 count是{{isodd2}}</p> <button @click="add">增加</button> <button @click="jian">减少</button> </div> </template> <script> // 1.获取mutations // import {mapMutations} from 'vuex' export default{ computed:{ count(){ // 得到vurx里面的count值 return this.$store.state.count }, isodd2(){ return this.$store.getters.isodd } }, methods:{ // 2.得到里面的方法 // ...mapMutations(['ADD','JIAN']), add(){ // 3.调用里面的方法 // this.$store.commit('ADD') // this.ADD() this.$store.dispatch('actionAdd') }, jian(){ // this.$store.commit('JIAN') // this.JIAN() this.$store.dispatch('act') } } } </script> <style> </style>