Vue入门 ---- vuex

##简介
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
vuex分为三大部分：
state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。
以下是vuex官网提供的的示意图：

vue init webpack-simple 文件名
cd 文件名
npm install
npm install vuex -D // 安装vuex
npm run dev

二、在src创建store.js

// 引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex);// state 管理数据
const state = {count: 10,
};
// mutations 处理数据变化
const mutations = {increment: (state) => {state.count++;},decrement: (state) => {state.count--;}
};
// actions 处理要做什么，异步请求，判断，流程控制
const actions = {increment: ({commit}) => {commit('increment')},decrement: ({commit}) => {commit('decrement')},clickOdd: ({commit, state}) => {if (state.count % 2 == 0){commit('increment')}},clickAsync: ({commit}) => {new Promise((resolve) =>{setTimeout(function() {alert(1);}, 1000);})}
};const getters = {count: state => {return state.count;},getOdd: state => {return state.count%2 == 0? "偶数": "奇数";}
}export default new Vuex.Store({state,mutations,actions,getters
});

三、main.js引用

import Vue from 'vue'
import App from './App.vue'
import store from './store'new Vue({store,el: '#app',render: h => h(App)
})

四、App.vue

<template><div id="app"><h3>Welcome vuex</h3><input type="button" value="增加" @click="increment"><input type="button" value="减少" @click="decrement"><input type="button" value="偶数才能点击+" @click="clickOdd"><input type="button" value="点击异步" @click="clickAsync"><div>现在的数字为：{{count}}, 他现在是{{getOdd}}</div></div>
</template><script>// mapAction 管理事件// mapGetters 获取数据
import {mapGetters, mapActions} from 'vuex'
export default {computed: mapGetters(['count','getOdd',]),methods: mapActions(['increment','decrement','clickOdd','clickAsync'])
}
</script><style></style>

官方推荐使用这样的目录结构

|--src|--store|--index.js      //|--types.js      // state数据|--mutations.js  // mytations|--actions.js    // actions|--getter.js     // 获取数据

index.js

// 引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex);
// 引入actions和mutations
import actions from './actions'
import mutations from './mutations'
import getters from './getters'export default new Vuex.Store({modules: {mutations},actions,getters
})

types.js

export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'

mutations.js

import {INCREMENT,DECREMENT
} from './types'
const state = {count: 20
};const mutations = {[INCREMENT]: (state) => {state.count++;},[DECREMENT]: (state) => {state.count--;}
};
export default {state,mutations
}

actions.js

import * as types from './types'
export default {increment: ({commit}) => {commit(types.INCREMENT);},decrement: ({commit}) => {commit(types.DECREMENT);},clickOdd: ({commit, state}) => {if (state.mutations.count % 2 == 0) {commit(types.INCREMENT);}},clickAsync: ({commit}) => {new Promise((resolve) => {setTimeout(function() {commit(types.INCREMENT)}, 1000)})}
}

getter.js

export default {count: (state)=> {return state.count;},getOdd: (state)=> {return state.count % 2 == 0 ? "偶数": "奇数";}
}

App.vue不用变，只需改动main.js的引用

import store from './store/'

Vue入门 ---- vuex相关推荐

Vue安装到入门 + vuex使用
1.Node和NPM NPM是Node提供的模块管理工具,可以非常方便的下载安装很多前端框架,包括Jquery.AngularJS.VueJs都有.为了后面学习方便,我们先安装node及NPM工具. ...
Vue.js——十分钟入门Vuex
一. 什么是Vuex? Vuex Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化. Vuex核 ...
5分钟带你入门vuex（vue状态管理）
如果你之前使用过vue.js,你一定知道在vue中各个组件之间传值的痛苦,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被修改,所有引用该值的地方就会自动更新,那么接下来我们就来学习 ...
基于vue2.0打造移动商城页面实践 vue实现商城购物车功能基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果...
基于vue2.0打造移动商城页面实践地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能地址:http://www.jb51.net/art ...
vue入门笔记（一）
Vue Day 01 B站原视频地址注:本文只是记录自己的学习过程文章目录 Vue Day 01 一.邂逅Vuejs 1.1.认识Vuejs 1.2.Vue的初体验 1.3.创建Vue时, opt ...
Vue入门之Web端CURD前端项目示例
Vue入门之Web端CURD前端项目示例随着vue.js越来越火,很多不太懂前端的小伙伴想要入坑.而入坑最好的办法就是上手实际操作,因此本文将重点放在实际操作上,对理论不做过多解释,不明白的地方小伙 ...
uniapp、vue，vuex中state改变，getters不动态改变的完美解决方案！
uniapp.vue,vuex中state改变,getters不动态改变的完美解决方案! 参考文章: (1)uniapp.vue,vuex中state改变,getters不动态改变的完美解决方案! ( ...
vue+vue-router+vuex实战
shopping vue + vue-router + vuex实现电商网站效果展示 install 下载代码: git clone https://github.com/chenchangyuan ...
axios vue 回调函数_Vue 02 —— Vue 入门小案例~使用 Axios 中的GET、POST请求
作为后端攻城狮,写前端代码是一种什么体验? 相信不少人和 @Python大星一样,有写过前端代码的经历. 记录一下,Vue 框架开发中"啼笑皆非"的故事,非专业前端人员,该案例无 ...

Vue入门 ---- vuex

Vue入门 ---- vuex相关推荐

最新文章

热门文章