快速上手
安装
推荐使用yarn安装。
yarn add vuex-sugar
使用步骤
Import
vuex-sugar(我叫做VuexSugar)。创建一个
VuexSugar实例。创建实例时，可以传入实例选项。建议你应该始终传入一个
baseUrl来表示向哪里发起请求。另外，可选的传入axios实例，也可以初始化默认的state。如果没有设置默认的state，vuex-sugar会自动根据property设置为null。添加 actions。
每个 action 都表示一个vuex action 的定义，通过传入选项参数对象来定义。当该
action被调用时（action属性指定的名称），会发起一个特定的请求(path属性指定的请求)，然后根据请求的返回值去设置对应的state（由property属性指定）。生成 store 对象。
手动调用
VuexSugar实例的getStore方法，或者将VuexSugar实例传入createStore方法。将store对象传入 Vuex.Store构建器，以进行注册。
// step 1
import VuexSugar from 'vuex-sugar';
// step 2
const posts = VuexSugar({
baseURL: '/v1/client',
state: { posts: [] }
})
// step 3
.get({
action: 'getPost', // action name
property: 'post', // state property name
path: ({ id }) => `/posts/${id}`
})
.get({
action: 'listPosts',
property: 'posts',
path: '/posts'
})
.post({
action: 'updatePost',
property: 'post',
path: ({ id }) => `/posts/${id}`
})
// step 4
.getStore(); // create store object
// step 5
export const store = new Vuex.Store(posts)
Store对象的结构
生成的 store 如下：
{
namespaced: false,
state: {
pending: {
posts: false,
post: false
},
error: {
posts: null,
post: null
},
posts: [],
post: null
},
mutations: {
LIST_POSTS: Function,
LIST_POSTS_SUCCEEDED: Function,
LIST_POSTS_FAILED: Function,
GET_POST: Function,
GET_POST_SUCCEEDED: Function,
GET_POST_FAILED: Function,
UPDATE_POST: Function,
UPDATE_POST_SUCCEEDED: Function,
UPDATE_POST_FAILED: Function
},
actions: {
listPosts: Function,
getPost: Function,
updatePost: Function
}
}
使用Store
上面生成的store对象可直接作为Vuex.store的构建器选项，或者作为module使用。
当通过Vuex.store注册后，即可像vuex原有的action、state一样进行使用。
重要概念
在vuex-sugar中需要明白三个重要的概念VuexSugar实例、action、store。
VuexSugar实例：是通过VuexSugar构造函数与选项参数生成的对象，它主要包含了一些请求处理参数，默认的state，以及action的部分预定义参数。action：通过VuexSugar实例add方法（或者其他快捷方法，如：get）方法添加的action。此处的action不同于 Vuex 中的action，这里仅仅只是包含action的一些预定义，并没有真正生成action函数。同样可以传入action选项，每调用一次
add方法，都会产生一个新的action。执行action时，可以传入提交参数。store：这里的是store与 Vuex store（module）的概念是一致的。通过调用VuexSugar.getStore()产生真正的action、mutation等。