文章目录
嘿嘿,先看vuex官方的话
“每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state) 。”
vuex是用来管理
和维护
多个组件间状态的传递的。vue官网中组件的传递使用的是事件发送。vuex的相关人员觉得:“事件发送挺好的,但是vuex用起来b格高”
vuex的安装:
命令: npm install vuex
如果出现依赖问题,可以使用以下命令处理:
npm i --legacy-peer-deps
vuex的使用:
先定义一下vuex的主文件index.js
,(一会再引入)
// index.js,我放在根目录下/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import tab from './tab'
Vue.use(Vuex)
export default new Vuex.Store({
modules:{
// 引入模块,因为实际中我们要管理的模块不止一个。一会再编写tab模块
tab
}
})
在main.js
中注入:
import Vue from 'vue'
import store from'../store';
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App),
}).$mount('#app')
编写tab.js
:
// tab.js,我放在根目录下/store/tab.js
export default {
state : {
// 这里放要管理的状态
isCollapse : false
},
mutations:{
// 定义待发送的事件,第一个参数会注入当前的state
exchange(state){
state.isCollapse = !state.isCollapse
}
}
}
状态的获取:
// 假如在 HelloWorl.vue组件中获取变量
<templete>
{{isCollapse}}
</templete>
<script>
export default {
data() {
return {
}
},
computed:{
isCollapse(){
// 存储位置: store.state.{模块名,在store/index.js中module下的}.{state中定义的属性}
return this.$store.state.tab.isCollapse
}
}
}
状态的改变:
通过发射事件改变状态,假如在work.vue
组件中
// 假如在 HelloWorl.vue组件中获取变量
<templete>
<button @click="change">改变isCollpasse</button>
</templete>
<script>
export default {
methods:{
change(){
// 语法:store.commit('{定义的事件,刚才在tab的mutation中定义的}')
this.$store.commit('exchange')
}
}
}
</script>
至此,vuex的基本使用完毕。
end
近期会跟新vue、ECharts、node.js的知识整理,关注实时接收到更新。如果觉得ok请帮我点赞
作者:zhijie
链接:https://juejin.cn/post/7068546909517905934
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。