Vue核心技术-52,Vuex-安装和简单使用

一,前言

上一篇简单介绍了vuex,这一篇介绍vuex的安装和简单使用

---

二,Vuex-store

一个Vuex应用的核心是store,
store是存放应用的中大部分状态 (state)的一个容器

但Vuex并不只是将数据存放到全局对象这么简单

Vuex和全局对象的区别:

1,Vuex是响应式状态存储

当Vue组件从store中读取状态时,若store中的状态发生变化,相应组件也会得到更新

2,不能直接改变 store 中的状态

改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
这使得我们可以方便地跟踪每一个状态的变

---

三,Vuex的安装

这里从头创建一个Vue工程,并继承vuex,在后续的介绍中将会继续使用

1,使用vue-cli创建脚手架,之前已经介绍过,可以查阅

vue init webpack vuex-demo

2,安装工程依赖:

npm install

3,下载vuex

npm install vuex --save

4,安装使用

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

Vue.use(Vuex)

---

四,项目结构

Vuex并没有规定的项目结构,但需要遵守Vuex的规则：

应用层级的状态应该集中到单个 store 对象中
提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
异步逻辑都应该封装到 action 里面。

只要遵守以上规则可随意组织代码

对于大型应用,应把Vuex相关代码分割到单独模块中
如store文件太大,需将action,mutation和getter拆分为单独文件

项目结构示例：

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

store文件夹下包含了Vuex模块全部代码
index.js组装模块并导出store,在main.js进行导入

目录下除index.js外的其他文件分别对应Vuex核心概念,后续将进行介绍

---

五,Vuex的简单使用

对上一篇Vue实现计数器的例子进行修改,在新建的脚手架工程中用Vuex实现

Vue实现:

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

Vuex实现-目录:

1,新建Vuex模块目录:src/store/index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  // 状态:对应vue中的data
  state: {
    count: 0
  },
  // 突变:对应vue中的methods
  mutations: {
    INCREMENT: state => state.count++,
    DECREMENT: state => state.count--,
  }
})

由于vuex是vue的一个插件,依赖于vue,所以需要先引入vue
Vue.use(Vuex)调用Vuex插件中install方法进行安装
export default导出Vuex.Store实例,供vue实例化导入使用

vue中的data和methods中的内容被转移到Vuex中的state和mutations中

2,创建根视图组件,通过Vuex访问state和触发mutations

Counter.vue:

<template>
  <div>
    <p>计数器:{{count}}</p>
    <button @click="increment">计数+1</button>
    <button @click="decrement">计数-1</button>
  </div>
</template>

<script>
  export default {
    // 实例挂载,打印this.$store
    mounted () {
      console.log(this.$store)
    },
    // 计算属性,从$store获取数据
    computed: {
      count () {
        return this.$store.state.count
      },
    },
    // 方法:提交突变
    methods: {
      increment () {
        this.$store.commit('INCREMENT')
      },
      decrement () {
        this.$store.commit('DECREMENT')
      }
    }
  }
</script>

<style>
</style>

这里会不会有一个疑问:

为什么不是this.$store.mutations.xxx直接触发事件,而是this.$store.commit一次
这个问题将在接下来对mutations的介绍中得到答案

注:这里故意将mutations中的命名改为大写以和methods中的方法进行区别

3,在入口文件中导入并使用vuex和根视图组件

import Vue from 'vue'
import Counter from './Counter.vue'
import store from './store'

new Vue({
  el: '#app',
  store,
  components: { Counter },
  template: '<Counter/>'
})

运行项目:

可以看到,devTools中可以记录每一次突变mutations的快照,方便开发者调试程序

---

六,结尾

通过以上操作,将计数器功能从vue自管理状态变为由Vuex进行状态管理,简单介绍了如何使用Vuex

对于Vuex有几个核心概念:
    State
    Getter
    Mutation
    Action
    Module

接下来的几篇将分别对vuex核心概念做介绍,加深对vuex的理解和应用