VueX实践--最基本的计数应用

首先搭建一个Vue脚手架，参考：https://editor.youkuaiyun.com/md/?articleId=108566766

删除项目无关的文件：

1.删除components/HelloWorld.vue组件。
2.删除路由里导入的组件代码：

3.删除App.vue中的样式和图片：

4.删除assets里的图片：

运行http://localhost:8081可以看到页面上什么都没有，我们现在可以开始搞事情了。

安装Vuex

cnpm i vuex --save-dev

在src目录下新建一个store目录，在store目录下新建一个store.js文件

Vuex 应用的核心就是 store（仓库），store基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

// store.js

import Vue from 'vue'
import Vuex from 'vuex'

// 在Vue中使用第三方插件Vuex
Vue.use(Vuex)

const store = new Vuex.Store({
    // 定义数据
    state:{
        count:1
    },
    mutations:{
        add(state) {
            state.count++
        }
    }
})
// 导出store
export default store

在全局使用vuex

在main.js中：

// 导入store
import store from './store/store.js'
//挂载store

new Vue({
el: '#app',
router,
 // 挂载store
store, //es6写法 
 components: { App },
 template: '<App/>'
})

在src目录下新建一个views目录，在store目录下新建一个.vue文件

最好定义一个vue代码片段，方便编写.vue文件，可参考下面这篇文档：
https://www.cnblogs.com/ZheOneAndOnly/p/11213183.html

我们知道，更改 Vuex 的 store 中的状态的唯一方法是提交 mutation（本文中请参考store.js文件）。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

新建state.vue文件：

在 Vuex 中，mutation 都是同步事务，我们通过this.$store.commit('add')在组件中同步调用store.js中add方法，我们通过点击事件调用这个commit事件。

<template>
   <div>
       <h1>state组件</h1>
       <h2>{{this.$store.state.count}}</h2>
       <button @click="change">点击计数加1</button>
   </div>
</template>

<script>
   export default {
       methods: {
           change() {
               this.$store.commit('add')
           }
       },
   }
</script>

<style scoped>
</style>

配置路由

import Vue from 'vue'
import Router from 'vue-router'
import state from '../views/state.vue'  //新增代码

Vue.use(Router)

export default new Router({
  routes: [
      {path:'/state',component:state}   //新增代码
  ]
})

运行代码

cnpm run dev

Getters的使用

1.在store.js 先建一个getters对象

getters:{
    computeCount(state) {
        return state.count*100
    }
}

2.使用getters

在views文件下新建一个getters.vue。
通过@click=""方法改变store.state里面的数据,store,state里面的数据改变了的时候，会自动触发getters里面的computeCount方法。（相当于计算属性）
获取getters 对象里面computedCount方法的返回值
{{this.$store.getters.computedCount}}

<template>
   <div>
       <h1>getters组件</h1>
       // 获取计算属性自动计算后的结果
       <h2>{{$store.getters.computedCount}}</h2>
       <button @click="multiadd">点我计数翻倍</button>
   </div>
</template>

<script>
   export default {
       methods: {
            multiadd() {
               this.$store.commit('add')
            }
       },
   }
</script>

<style scoped>
</style>

2.配置路由

import Vue from 'vue'
import Router from 'vue-router'
import state from '../views/state.vue' 
import getters from '../views/getters'  //新增代码

Vue.use(Router)

export default new Router({
  routes: [
      {path:'/',redirect:'/state'},   //路由重定向  
      {path:'/state',component:state}, 
      {path:'/getters',component:getters}   //新增代码
  ]
})

Action的使用

Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作

1.在store.js 定义一个actions对象

actions:{
    // 第一个参数上下文对象(mutations,state)，第二个传递参数
    incCount(context) {
        context.commit('add')
    }
}

2.使用actions

在views文件下新建一个actions.vue。

<template>
   <div>
       <h1>actions组件</h1>
       <h2>{{this.$store.state.count}}</h2>
       <button @click="addCount">点我计数加1</button>
   </div>
</template>

<script>
   export default {
       methods: {
           addCount() {
               this.$store.dispatch('incCount')
           }
       },
   }
</script>

<style scoped>
</style>

actions.vue组件通过dispatch方法触发actions的incCount方法，用一个上下文对象context调用commit方法提交给mutations，动态修改state.count。
参考官网这张图片：

3.配置路由

import Vue from 'vue'
import Router from 'vue-router'
import state from '../views/state.vue' 
import getters from '../views/getters.vue' 
import actions from '../views/actions'  //新增代码

Vue.use(Router)

export default new Router({
  routes: [
      {path:'/',redirect:'/state'},   //路由重定向  
      {path:'/state',component:state}, 
      {path:'/getters',component:getters},
      {path:'/actions',component:actions}   //新增代码
  ]
})