vuex的基本学习
http://vuex.vuejs.org/en/
https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart
store.js:
import Vue from 'vue'import Vuex from 'vuex'import tasks from './modules/tasks'import mutations from './mutations.js'import * as actions from './actions'import * as getters from './getters'import * as state from './state.js'Vue.use(Vuex)const store = new Vuex.Store({ modules: { tasks }, state, getters, actions, mutations})export default store
actions.js
/*** action 是一种专门供vue组件调用的事件库,它的职责是 通过调用指定的mutations 函数来触发对 state 的更新。* 特性：actions支持异步操作；mutations只能进行同步操作。* 也许会有这个疑问：为什么不直接调用 actions 来更新 state， 而需要一个中间人 mutations 来更新state？* 引用官方的一句话来回答：* 【再次强调，我们通过提交 mutation 的方式，而非直接改变 store.state，是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显，这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外，这样也让我们有机会去实现一些能记录每次状态改变，保存状态快照的调试工具。有了它，我们甚至可以实现如时间穿梭般的调试体验。由于 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutations。】* * 话虽如此，但在state进行异步后跳过mutation直接更新state也是可行的。* 所以，我们约定，只有产生异步的操作，才需要使用mutation。（严格模式下，该方式是不行的。）* 使用严格模式：* const store = new Vuex.Store({ // ...options strict: process.env.NODE_ENV !== 'production', // 在非生产环境下，使用严格模式 })*/import * as type from './mutation-types.js'// 设置是否显示加载中export const set_loading = ({commit}, b) => { commit(type.IS_LOADING, b);}
getter.js
/** * getter 是一种专门供vue组件调用的函数,它的职责是获取vuex中的state * getter 的职责是从state中获取并且返回值 * 必须是 return 才可以在 $store 中获取 */ export const backPath = ( state ) => state.base.backPath;
mutations.js
import * as type from './mutation-types.js'const mutations = { [type.IS_LOADING] (state, b) { state.is_loading = b; }}export default mutations;
mutations-type.js
export const RECEIVE_TASK_LIST = 'RECEIVE_TASK_LIST'export const IS_LOADING = 'IS_LOADING'
使用的套路：
// 自己探索出来的方式created () { // 调用actions this.$store.dispatch('set_back_path',"abc123").then(function(){ // ... }) // 调用getters console.log(this.$store.getters.backPath) }// 获取state并且绑定computed: { is_loading () { return this.$store.state.is_loading }}// 我个人更喜欢这种通用的,这里的./store/index.js导出的是Vuex.store实例import store from './store/index.js'store.dispatch('set_back_path', fromPath); // 调用actions
其他套路1：如果管理的状态不需要进行异步请求，那么可以不需要使用Mutations. 以一个简单的AppData模块为例：
import fetch from './../../fetch/api.js'import * as types from '../mutation-types'let state = { AppData: { "Ip":null, "SystemName":null, "Version":null, "Token":"3768645a-1433-11e6-a74c-02004c4f4f50", "UserId":"3768645a-1433-11e6-a74c-02004c4f4f50" }}const getters = { AppData (state) { return state.AppData; }}const actions = { setAppData ({ commit, state }, data) { state.AppData = data; }}export default { state, getters, actions} 可以看到actions中直接操作了state。不需要借助Mutations。但这种方式在严格模式下行不通
其他套路2：如果要在一些js文件中使用store、vuex的实例。只需要直接引入vuex的导出文件即可.
import store from '../store/index.js';store.dispatch('set_fetch_count','-'); 当然前提是你的store进行过vue.use(...)了
严格模式：
const store = new Vuex.Store({ // ...options strict: process.env.NODE_ENV !== 'production', // 在非生产环境下，使用严格模式})