引用
在一个模块化的打包系统中，您必须显式地通过 Vue.use() 来安装 Vuex：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
当使用全局 script 标签引用 Vuex 时，不需要以上安装过程。
项目结构
Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：
- 应用层级的状态应该集中到单个 store 对象中。
- 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
- 异步逻辑都应该封装到 action 里面。
对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例：
├── 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
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
actions: {
updataCount ( {commit} ) {
setTimeout(function(){
commit('UPDATACOUNT')
},3000)
}
},
getters: {
toDouble: (state) =>{
return state.count + 2
}
},
state: {
count: 1
},
mutations:{
UPDATACOUNT: (state) => {
state.count++
}
}
})
app.vue
<template>
<div id="app">
<div>{{ count }}</div>
<button @click="add()">count+1</button>
</div>
</template>
export default {
name: 'vue-app',
computed: {
count (){
return this.$store.getters.toDouble
}
},
methods: {
add () {
this.$store.commit('UPDATACOUNT')
}
}
}
在methods的add方法中,通过$store.commit来调用store中mutations里设置的方法
