下面用一个小的例子开始。
一、创建独立的state singleModule文件，如count.js，内容如下
export default {
/** 初始状态 */
state: { count: 0 },
/**
*mutations ( 类似redux中的reducer， 表示了对状态state造成的影响 ) 函数内不能出现异步操作
*直接修改state的值 reducer是返回一个新的state对象
*/
getters: {
count: state => state.count
},
/**
* 方便获取state中的值 或者获取处理值
*/
mutations: {
ADD_ONE(state)
{
state.count += 1;
},
SET_VAL(state, order)
{
const _order = Object.assign({ count: state.count }, order || {});
state.count = _order.count;
}
},
/** 对mutations的引用（ 可进行异步操作，回调mutations ） */
actions: {
_ADD_ONE: ({ commit }, order) => commit('ADD_ONE')，
_SET_VAL: ({ commit }, order) =>
{
$.ajax({ ....}).done(result =>{ commit('SET_VAL', result.data) });
}，
_SET_VAL_THEN: ({ commit }, order) => {
return new Promise((resolve, reject) =>
$.ajax({ ....}).done(result =>{ commit('SET_VAL', result.data); resolve(result.data) });
});
}
},
/** 独立命名空间 建议总是使用（ 使用后在对getters actions state的获取时 ） */
namespaced: true
}
二、初始化store
import Vue from 'vue';
import Vuex from 'vuex';
import count from 'count';
export default new Vuex.Store(
{
modules:
{
_count: count // _count 为此modules名 获取state等信息时需要
}
})
三、初始化app时挂载
import App from 'App';
import Vue from 'vue';
import store from 'store';
import router from 'router';
new Vue({
store,
router,
template: '<APP/>',
render: h => h(App)
}).$mount('#app')
四、调用
<script>
// 组建中调用
import Vue from 'vue';
export default Vue.extend(
{
computed: {
...mapGetters('_count', [ 'count' ]) // 获取_count模块中count-getter
// 同...mapState('_count', [ 'count' ])
},
methods:{
...mapActions('_count', { 'addOne': 'ADD_ONE'; 'setVal': '_SET_VAL' }) // 获取并重命名
}
})
// 非组件中调用( 设置了命名空间后的调用方式自己猜测出来的 得瑟ing )
import store from 'store';
store.dispatch('_count/ADD_ONE');
store.dispatch('_count/_SET_VAL', { count: * })
</script>
summary:
总体来说比react中redux容易很多。掌握理解state store actions即可。
