一,前言
上一篇简单介绍了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的理解和应用