【改写】使用 vuex（1.0） 改写counter应用

使用 vuex 改造counter应用

1. 原版vue应用

附原文链接：https://blog.csdn.net/JJJikerUPUP/article/details/89291472

2. vuex简介

vuex 是什么：

1. github 站点：https://github.com/vuejs/vuex
2. 在线文档：https://vuex.vuejs.org/zh-cn
3. 简单来说：vuex 是对 vue 应用中多个组件d的共享状态进行集中式的管理

多组件共享状态的问题：

1. 多个视图依赖于同一状态
2. 来自不同视图的行为需要b变更同一状态
3. 以前的解决办法：
   将数据以及操作数据的行为都定义在父组件
   将数据以及操作数据的行为传递给x需要的各个子组件（有可能需要多级传递）
4. vuex 就是用来j解决此类问题

3.vuex 理解

3.1状态自管理

状态自管理效果图：

• State：代表数据 data，驱动应用的数据源
• View：代表页面渲染数据（template），以声明方式将 state映射到视图
• Actions：代表页面操作时对应的方法，响应在 view 上的用户操作导致的变化

3.2 核心 API

3.2.1 state

1. vuex 管理的状态对象
2. 它应该是唯一的

const state = {
	xxx:initValue
}

3.2.2 mutations

1. 包含多个直接更新 state 的方法（回调函数）的对象
2. 触发条件：action 中的 commit() 命令
3. 只能包含同步代码，不能写异步代码

const mutations = {
	yyy(state,data){
		//更新 state 的某个属性
	}
}

3.2.3 actions

1. 包含多个事件回调函数的对象
2. 通过执行 commit() 来触发 mutation 的调用，间接更新 state
3. 触发条件：组件中的 $store.dispatch()
4. 可以包含异步代码（定时器、ajax）

const actions = {
	zzz({commit,state}){
		commit('yyy',data2)
	}
}

3.2.4 getters

1. 包含多个计算属性 （get） 对象
2. 读取条件：组件中的 $store.getters.xxx

const getters = {
	mmm(state){
		return ...
	}
}

4. 操作

4.1 搭建项目工程，并安装 vuex

使用 vue-cli 搭建项目工程

vue init webpack [项目名称]

安装 vuex

npm install --save vuex

4.2 创建 store.js 的文件

创建一个store.js的文件，此文件是vuex的核心管理对象模块

在该文件中引入模块并声明使用、向外暴露

/**
 * vuex 的核心管理对象模块：store
 */
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
	state, //状态对象
	mutations, //包含多个更新 state 函数的对象
	actions, //包含多个对应事件回调函数的对象
	getters //包含多个 getter 计算属性的对象
})

//定义四个状态对象
const state = {
	
}

const mutations = {
	
}

const actions = {
	
}

const getters = {
	
}

在 main.js 入口文件中映射 `store

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import store from './store.js'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  store //所有组件对象都多了一个属性：$store
})

4.3 改写代码

改写 App.vue 组件

<template>
  <div>
  	<p>click {{this.$store.state.count}} times,count is {{this.$store.getters.evenOrOdd}}</p>
  	<button @click="increment">+</button>
  	<button @click="decrement">-</button>
  	<button @click="incrementIfOdd">increaseIfOdd</button>
  	<button @click="incrementAsync">increase async</button>
  </div>
</template>

<script>
	export default {
		
		computed:{
			evenOrOdd(){
				return this.$store.getters.evenOrOdd
			}
		},
		
		methods:{
			//增加
			increment(){
				//通知 vuex 去增加
				this.$store.dispatch('increment') //触发 store 中对应的 action 调用
			},
			
			//减少
			decrement(){
				this.$store.dispatch('decrement')
			},
			
			//如果是奇数则增加
			incrementIfOdd(){
				this.$store.dispatch('incrementIfOdd')
			},
			
			//异步增加
			incrementAsync(){
				this.$store.dispatch('incrementAsync')
			},
		}
	}
</script>

<style>

</style>

在 store.js 中设置状态对象

/**
 * vuex 的核心管理对象模块：store
 */
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
	state, //状态对象
	mutations, //包含多个更新 state 函数的对象
	actions, //包含多个对应事件回调函数的对象
	getters //包含多个 getter 计算属性的对象
})

//定义四个状态对象
const state = {
	count:0
}

//包含多个更新 state 函数的对象
const mutations = {
	//增加的mutation
	INCREMENT(state){
		state.count++
	},
	
	//减少的mutation
	DECREMENT(state){
		state.count--
	}
}

//包含多个对应事件回调函数的对象
const actions = {
	
	//增加的action
	increment({commit}) {
		// 提交增加的mutation
		commit('INCREMENT')
	},
	
	//减少的action
	decrement({commit}) {
		commit('DECREMENT')
	},
	
	//带条件的action
	incrementIfOdd({commit,state}) {
		if (state.count % 2 === 1){
			commit('INCREMENT')
		}
	},
	
	//异步的action
	incrementAsync({commit}) {
		//在action中直接可以执行异步代码
		setTimeout(() => {
			//提交增加的mutation
			commit('INCREMENT')
		},1000)
	}
}

//包含多个 getter 计算属性函数的对象
const getters = {
	evenOrOdd (state) {
		return state.count%2 === 0 ? '偶数' : '奇数' 
	}
}

4.4 启动应用

在控制台中进入该项目文件，并运行以下命令

npm run dev

出现如下界面

访问：http://localhost:8080/ 端口

项目改写完成。

时间：2019.5.23 16:27