1 第一步安装  npm install vuex --save

2 在main.js 同级新建store.js


3 编辑store.js 在store.js 引用 vuex

  import Vue from 'vue'
  import Vuex from 'vuex'

  Vue.use(Vuex)

4 用export default 封装代码,让外部可以引用

  const store = new Vuex.Store({
    state : {
      count : 0
    }
  })

  export default store

5 在main.js 引入新建vuex文件

  import store from './store.js'

  然后实例化  

  new Vue({
    el: '#app',
    router,
    store,//实例化
    template: '<App/>',
    components: { App }
  })

  这样就可以在需要用到的组件中通过this.$store来引用这个store对象了

最后附上完整的demo,简单的计数demo

项目地址 https://gitee.com/zjtol/vuex_demo

或直接 git clone git@gitee.com:zjtol/vuex_demo.git      然后 npm install



Logo

前往低代码交流专区

更多推荐