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组件中获取变量

    {{isCollapse}}

至此，vuex的基本使用完毕。

end

近期会跟新vue、ECharts、node.js的知识整理，关注实时接收到更新。如果觉得ok请帮我点赞