vuex使用

步骤

dispatch --actions
commit -- mutasions

  1. store 目录下下建立一个总
import routerStore from './routerStore'
export default {
    modules: {
        routerStore
    }
};

2.main.js 下引入, 并且创建实例

import Vuex from "vuex";
import storeConfig from './store/index'
Vue.use(Vuex)
const store = new Vuex.Store(storeConfig);
new Vue({
  router,
  render: h => h(App),
  store
}).$mount('#app')

3.创建分支vuex

export default {
    namespaced: true,
    state: {
        col: 'home',

    },
    mutations: {
        changeCol(state, { col }) {
            console.log(col)
            state.col = col;
        }
    },
    actions: {

    }

}

4.组件中使用

computed: {
    col(){
      return this.$store.state.routerStore.col
    }
  },
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,963评论 0 7
  • vuex是一个专门为vue构建的状态管理工具,主要是解决多组建状态共享的问题。强调的是集中式管理(组件与组件之间的...
    离陌Study阅读 8,429评论 0 4
  • [toc] 一、使用Vuex的目的 实现多组件状态管理。多个组件之间需要数据共享时,Vuex是个很好的帮手哦 二、...
    SunnySnowy阅读 315评论 0 1
  • Vuex 是 状态管理的编程模式 + 工具库,适用于 Vue.js 编写的应用。它作为一个集中化的 store (...
    lion1ou阅读 3,677评论 2 7
  • Vuex:是一个集中式状态管理工具,相当于react中的 redux 1) 主要解决的问题:大中型项目中复杂组件通...
    奋斗1216阅读 193评论 1 0