vuex——基本使用

npm i vuex -s

2.vue的基本使用流程

一.新建store的js文件

1.引入模块

import vuex from 'vuex'

2.注册模块

import vue from 'vue'
vue.use(vuex)

3. 声明实例并且返回实例

export default new vuex.store({
  state: {
    count: 0
  },
}

4.设置改变状态的方法

export default new vuex.store({
  state: {
    count: 0
  },
  mutations: {
    set_count (state, num) {
      state.count = num
    }
  }
}

二、main.js文件

1.引入实例

import store from './common/js/store'

2.注册实例(全局使用)

// 方法一
vue.prototype.$store = store

// 方法二

/* eslint-disable no-new */
new vue({
  el: '#app',
  router,
  store,
  components: { app },
  template: ''
})

三、*vue文件

1.使用计算属性实时监听调用实例的状态

 computed: {
    count () {
      return this.$store.state.count
    },
}

2.在mounted中调用改变状态的方法

mounted () {
  let i = 1
  setinterval (() => {
     this.$store.commit('set_count', i++)
  }, 1000)
}

3. 调用count计算属性,测试是否成功

{{count}}