使用 vuex 改造counter应用

1. 原版vue应用

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

2. vuex简介

vuex 是什么：

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

多组件共享状态的问题：

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

3.vuex 理解

3.1状态自管理

状态自管理效果图：

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

3.2 核心 API

3.2.1 state

vuex 管理的状态对象它应该是唯一的 const state = { xxx:initValue }

3.2.2 mutations

包含多个直接更新 state 的方法（回调函数）的对象触发条件：action 中的 commit() 命令只能包含同步代码，不能写异步代码 const mutations = { yyy(state,data){ //更新 state 的某个属性 } }

3.2.3 actions

包含多个事件回调函数的对象通过执行 commit() 来触发 mutation 的调用，间接更新 state触发条件：组件中的 $store.dispatch()可以包含异步代码（定时器、ajax） const actions = { zzz({commit,state}){ commit('yyy',data2) } }

3.2.4 getters

包含多个计算属性 （get） 对象读取条件：组件中的 $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