应用级的状态集中放在store中；
改变状态的方式是提交mutations，这是个同步的事物；
异步逻辑应该封装在action中。
const vuex_store = new Vuex.store({
state:{
xxx:oooo; // 定义你的数据源
}
})
npm install vuex --save-dev
它必须以插件的方式进行引用：
import Vuex from 'vuex';
Vue.use(Vuex);
state，驱动应用的数据源；（vue实例化出来的状态）
view，以声明方式将state映射到视图；（视图 template呈现的模板）
actions，响应在view上的用户输入导致的状态变化。（methods的行为 状态变化）
Vuex 允许我们在 store 中定义『getters』（可以认为是 store 的计算属性）。Getters 接受 state 作为其第一个参数：
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于事件：
每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法：
向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读
提交 mutation 的另一种方式是直接使用包含 type 属性的对象：
store.commit({
type: 'increment',
amount: 10
})
当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数，因此 handler 保持不变：
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
最好提前在你的 store 中初始化好所有所需属性。
当需要在对象上添加新属性时，你应该
使用 Vue.set(obj, 'newProp', 123), 或者 -
以新对象替换老对象。例如，利用 stage-3 的对象展开运算符我们可以这样写：
state.obj = { ...state.obj, newProp: 123 }
（常用）
使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然：
// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'
// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'
const store = new Vuex.Store({
state: { ... },
mutations: {
// 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
[SOME_MUTATION] (state) {
// mutate state
}
}
})
一条重要的原则就是要记住 mutation 必须是同步函数：
mutations: {
someMutation (state) {
api.callAsyncMethod(() => {
state.count++
})
}
}
你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations([
'increment'---------------->映射 this.increment() 为 this.$store.commit('increment')
]),
...mapMutations({
add: 'increment'---------------->映射 this.add() 为 this.$store.commit('increment')
})
}
}
在 Vuex 中，mutation 都是同步事务：
store.commit('increment')
// 任何由 "increment" 导致的状态变更都应该在此刻完成。
Actions 支持同样的载荷方式和对象方式进行分发：
// 以载荷形式分发
store.dispatch('incrementAsync', {
amount: 10
})
// 以对象形式分发
store.dispatch({
type: 'incrementAsync',
amount: 10
})
对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。
模块内部的 action，局部状态通过 context.state 暴露出来， 根节点状态则为 context.rootState
如果希望你的模块更加自包含或提高可重用性，你可以通过添加 namespaced: true 的方式使其成为命名空间模块。
当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名
原生事件在router-link中加.native才能生效，而a标签就不用
意思就是当你给一个vue组件绑定事件时候，要加上native！如果是普通的html元素！就不需要