VUE2.x中vuex的使用

vuex的使用

嘿嘿，先看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请帮我点赞