参考：https://jspang.com/post/vuex.html
总结：不要过渡使用vuex，能使用参数传递，尽量使用参数传递。
1、Vuex基本介绍
数据仓库，状态管理器。以前是用session操作。学习基础：Router vue-cli
安装：$ npm install vuex --save
2、项目创建
创建基础项目$ vue init webpack vuex? Project name (vuex)? Project name vuex? Project description (A Vue.js project)? Project description A Vue.js project? Author (wang <weiwei@163.com>)? Author wang <weiwei@163.com>? Vue build (Use arrow keys)? Vue build standalone? Install vue-router? (Y/n) y? Install vue-router? Yes? Use ESLint to lint your code? (Y/n) n? Use ESLint to lint your code? No? Set up unit tests (Y/n) n? Set up unit tests No? Setup e2e tests with Nightwatch? (Y/n) n? Setup e2e tests with Nightwatch? No? Should we run `npm install` for you after the project has been created? (recom? Should we run `npm install` for you after the project has been created? (recommended) npm3、部署vuex环境
创建项目目录：vuex/store.js文件import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)
const state={ count: 0}//改变state值，必须调用mutations方法
const mutations={ add(state,n){ state.count+=n; }, reduce(state){ state.count--; }, reset(state){ state.count=0; }}export default new Vuex.Store({
state}) 创建components/Count.vue组件。<template> <div class="hello"> <h1>{ { msg }}</h1><hr> <h2>{ {$store.state.count}}=====>{ {count}}</h2> <p> <button @click="$store.commit('add',10)">+</button> <button @click="reduce">-</button> <button @click="$store.commit('reset')">reset</button> </p> </div></template><script>
import store from '@/vuex/store'import { mapState,mapMutations ,mapGetters, mapActions} from 'vuex'export default {
data () { return { msg: 'Hello Vuex !' } }, computed:{ ...mapState(['count']), }, store}</script> 配置路由import Count from '@/components/Count'Vue.use(Router)
export default new Router({
routes: [ { path: '/', component: HelloWorld },{ path: '/count', component: Count } ]})访问方式：http://localhost:8080/#/count
点击“+”自增1，“-”自减1,RESET重置归零。
4、修改状态值
Getters，actions同步异步修改访问。const getters={ count:function(state){ return state.count+=100; }}//异步修改数据
const actions={ addAction(context){ context.commit('add',10); //配置延迟3秒减1，测试。 setTimeout(()=>{context.commit('reduce')},3000); console.log('我比reduce先执行了!') }, reduceAction({commit}){ commit('reduce'); }}export default new Vuex.Store({ state,mutations,getters,actions})完善配置Count组件。
<template> <div class="hello"> <h1>{ { msg }}</h1><hr> <h2>{ {$store.state.count}}=====>{ {count}}</h2> <p> <button @click="$store.commit('add',10)">+</button> <button @click="reduce">-</button> <button @click="$store.commit('reset')">reset</button> </p> <p> <button @click="addAction">+</button> <button @click="reduceAction">-</button> </p> </div></template><script>
import store from '@/vuex/store'import { mapState,mapMutations ,mapGetters, mapActions} from 'vuex'export default {
data () { return { msg: 'Hello Vuex !' } }, computed:{ ...mapState(['count']), //...mapGetters(['count']) }, methods:{ ...mapMutations(['add','reduce']), ...mapActions(['addAction','reduceAction']), }, store}</script> 至此，完成了vuex功能学习。补充内容：
Action修改状态（异步修改）。同步和异步的区别。模块组
项目不复杂，不建议使用。实际项目组尽量不要使用，可不纠结。