vuex在项目中的使用

image.png

下载包：

npm install vuex --save  

安装依赖

通常和main.js平级，创建store.js文件

import Vue from 'vue'
import Vuex from 'Vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state:{
   count:0,//全局默认的值
  },
  getters:{
   
  },
  mutations:{
   

  }
})

组件中展示vuex的state数据：

展开运算符展示：

普通展示：

用mutation变更state中的数据（集中监控数据的变化）：

import Vue from 'vue'
import Vuex from 'Vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state:{
   count:0,//全局默认的值
  },
  getters:{
   
  },
  mutations:{
    add(state){
      state.count++
    },
    addN(state,step){
      state.count += step
    },
    sub(state){
      state.count--
    },
    subN(state,step){
      state.count -= step
    }
  }
})

调用：