标签：应用 param event cti 提交 异步 default 文件夹 计算
1、vuex的简单使用方法
安装： cnpm install vuex --save
使用：
（1）新建一个store的文件夹
代码例子：
import Vue from ‘vue‘ import Vuex from ‘vuex‘ Vue.use(Vuex) const state = { count: 0 } const mutations = { increment(state) { state.count ++; } } export default new Vuex.Store({ state, mutations })
（2）在main.js里面引用
new Vue({ el: ‘#app‘, store, router, template: ‘<App/>‘, components: { App } })
（3）在组件里面里面使用
export default { computed: { count() { return this.$store.state.count } } }
2、state
（1）mapState函数
当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键
PS： 当computed里面还要同时放置其他的计算属性的时候，可以把state的通过对象展开运算符
computed: { ...mapState({= count: state => state.count, countAlias: ‘count‘, countPlusLocalState (state) { return state.count + this.localCount } }) }
2、getter
getter的返回值会根据它的以来被缓存起来，且当只有它的依赖值发生改变才会被重新计算
（1）接受state作为第一个参数
const getters = { evenCount: state => { return state.count + 2; } } export default new Vuex.Store({ getters })
（2）接受其他的getter作为第二个参数
doneTodos: state => { return state.todos.filter(todo => todo.done) }, doneTodosCount: (state, getters) => { return getters.doneTodos.length }
（3）也可以通过返回一个函数，实现给 getter 传参
getTodosById: state => (id) => { return state.todos.find(todo => (todo.id) === id) }
（4）mapGetters辅助函数
...mapGetters({ evenCount:‘evenCount‘, doneTodos: ‘doneTodos‘, doneTodosCount: ‘doneTodosCount‘, })
3、mutation： 同步函数
更改vuex的store中的状态的唯一发哪地方是提交mutation，在vuex中的mutation非常类似与事件：每个mutation都有一个字符串的事件类型（type）和一个回调函数（handler）。这个回调函数就是我们实际进行状态更改的地方，并且他会接受一个state作为第一个参数：
const mutations = { increment(state) { state.count ++ } }
（1）mapMutations
methods: { ...mapMutations({ add: ‘increment‘ }) }
（2）可以向mutation传入额外的参数，即mutation的载荷
customIncrement(state, payload) { state.count += payload.n }
使用：
customAdd() { return this.$store.commit("customIncrement", { ‘n‘: 3 }) }
4、action ： 可以异步执行
Action 类似于 mutation，不同在于：
使用：
export default { addevent: ({commit}, param) => commit(‘ADDEVENT‘, param), reduce: ({commit}, param) => commit(‘DISCREMENT‘, param), }
调用：
...mapActions({ add1: ‘addevent‘ }), reduce() { this.$store.dispatch("reduce").then(() => { console.info(23342) }) }
PS： 异步执行可以利用.then 、 async/await
5、module
由于使用单一状态数的话，应用的所有会集中到一个比较大的对象，当应用变得非常复杂的时候，store对象就有可能变得相当的臃肿，因此可以将store分割模块，每个模块拥有自己的state、mutation、action、getter
const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> moduleA 的状态 store.state.b // -> moduleB 的状态
标签：应用 param event cti 提交 异步 default 文件夹 计算
原文地址：http://www.cnblogs.com/qzccl/p/7994119.html
