对vuex的初步理解

我对vuex的理解：vuex大型单页应用，状态管理，组件传值，当然目前我就接触到这么多的内容，哈哈哈，好了，开始正式说了哈

一，平时我们传参数或者多个组件直接传参数，会有好多的步骤，也特别麻烦，所以才会出现vuex这样的状态管理模式；

我这边给大家写一个demo,理解不到位的地方，希望大家多多提意见哈
第一步：安装vuex
npm install vuex --save
第二步：我们在main.js加入
import vuex from “vuex”
Vue.use(vuex);
var store = new vuex.Store({//store对象
state:{
show:false //这里是我们写的一个状态值，大家可以随便写一个啊
}
})
第三步：当然就是我们在实例化的时候把这个store加入进去
这样就可以了

到这里哪，我们就可以用这个$store.state.show 了，没错。改变单个状态的时候就是这么简单，很好理解吧

到这里有人会问，那我们可不可以将这个状态单独拿出来，放到一个文件，然后这个文件日后只做状态维护，当然可以
还是按照上边的方法，
第一步：
我们在src目录下新建一个store文件夹，然后在该文件夹底下建一个index.js

在index.js中写入在main.js中之前写入的代码
import Vue from ‘vue’
import vuex from ‘vuex’
Vue.use(vuex);

export default new vuex.Store({
state:{
show:false
}
})

那么我们在main.js中就要把代码改为
import store from ‘./store’
直接把文件引进来

这样就把 store 彻底拿出来了 , 那么还有一个问题是 : 这里 $store.state.show 无论哪个组件都可以使用 , 那组件多了之后 , 状态也多了 , 这么多状态都堆在 store 文件夹下的 index.js 不好维护怎么办 ?

我们可以使用 vuex 的 modules , 把 store 文件夹下的 index.js 改成 :

import Vue from ‘vue’
import vuex from ‘vuex’
Vue.use(vuex);

import dialog_store from ‘…/components/dialog_store.js’;//引入某个store对象

export default new vuex.Store({
modules: {
dialog: dialog_store
}
})

这里的dialog_store.js，可以单独写一个组件状态了
例如：
export default {
state:{
show:false
}
}

做出这样的修改之后 , 我们将之前我们使用的 $store.state.show 改为 $store.state.dialog.show就可以了。

如果还有其他的组件需要使用 vuex , 就新建一个对应的状态文件 , 然后将他们加入 store 文件夹下的 index.js 文件中的 modules 中。

modules: {
dialog: dialog_store,
other: other,//其他组件
}

，这样是不是就简单多了，这就是我目前的理解，大家有什么问题，可以随时提出啊，感谢大家的阅读，哪里有不对的地方，请多多指教。谢谢大家