我对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,//其他组件
}
,这样是不是就简单多了,这就是我目前的理解,大家有什么问题,可以随时提出啊,感谢大家的阅读,哪里有不对的地方,请多多指教。谢谢大家