项目结构
项目构建必须遵守的规则
- 将应用层级的状态保存在单个store中
- mutations是唯一能改变状态的方式，并且需要是异步
- 异步处理应该写在actions中
下面是推荐的项目结构
项目结构
插件
store 接受 plugins 选项，插件可以暴露 mutations 的钩子函数。同时，插件其实就是一个函数，该函数接受 store 作为唯一参数。
基本用法
// 插件，结合箭头函数
// 插件在store初始化之后调用
var myPlugins = store => {
// 每次 mutation 之后调用
store.subscribe((mutation,state)=>{
// mutation 的形式为 {type,payload}
});
}
// 插件的使用
var store = new Vuex.Store({
...
plugins: [myPlugins]
});
插件内提交Muatioins
插件中不允许直接修改state，因此也需要使用Mutations。该例子结合了websocket
// 该插件完成了一个功能，实现客户端和服务端通信
// 闭包，创建
function createPlugin (scoket) {
return store => {
// 当服务器向客户端发送数据之后，客户端更新state上数据
scoket.on('data',data => {
store.commit('receiveData',data);
}
// 当mutations 被触发之后，该方法执行，此时，判断执行的方法是什么，然后对某些方法再做处理
store.subscribe((mutation,state)=>{
if (mutation.type === 'UPDATE_DATA') {
scoket.emmit('update',mutation.payload)
}
});
}
const myPlugins = createPlugin(
const store = new Vuex.Store({
state: {},
plugins: [myPlugins]
});
生成state快照
在开发环境中，有使用需要生成state快照，这样可以比较state前后状态
const createSnapshotPlugin = store => {
let oldState = _.cloneDeep(store.state)
store.subscribe((mutation,state) => {
let nowState = _.cloneDeep(state);
// 做完操作之后，再将新值赋值给旧值
oldState = nowState;
});
}
// 但是该插件只需要在开发环境中使用
const store = new Vuex.Store({
state,
plugins: progress.env.NODE_ENV !== 'production' ? [createSnapshotPlugin] : []
});
严格模式
- 不要在发布环境中使用严格模式
- 使用严格模式，只需要在store中添加
stric:true。只要状态变更且不是由 mutation 函数引起的，就会报错
表单处理
表单处理，在
v-model时，如果改变的时store中的状态会报错
使用 getter 和 setter 进行处理
computed: {
comp: {
get: function () {
return this.$store.state.obj.msg
},
set: function (val) {
this.$store.commit('updateMessage',val);
}
}
}
不是用v-model语法糖，绑定到数据和事件上
这种方式中，其实就是将store的状态先传递给computed,这一步是为了显示。再在methods中调用commit触发store的mutations，这一步阻止报错。
<input :value="message" @input="updateMessage">
// ...
computed: {
...mapState({
message: state => state.obj.message
})
},
methods: {
updateMessage (e) {
this.$store.commit('updateMessage', e.target.value)
}
}
模块中的 store 和组件中 使用
注意在Vue实例和模块中触发各个方法的方式相同。而在组件中，一般使用解绑的方式
- 通过namespace文件，为各个 store 模块命名
- 在 store 模块中，引入命名空间，对各种方法名进行拼接，并且导出
- 在组件中，导入Vuex的各种绑定辅助函数，在computed和methods中分别绑定
- 其他模块中如果有context，或者组件使用store引入，那么使用
store.commit(GET_HTTPS);即可
