VUE-VUEX的使用

• 安装vuex

npm install vuex --save / cnpm install vuex --save

• 在store.js页面引入

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

• 定义数据

// 1.state 表示状态 用于存储数据
var state = {
    count:1
}
// 2.mutations里面放的是方法，主要用于改变state里面的数据
var mutations = {
    addNum(){
        ++state.count;
    }
}
// 3.类似计算属性 改变state里面的count数据的时候 会触发getters里面的方法 获取新的值
var getters = {
    computedCount:(state)=>{
        return state.count*2
    }
}
//  4.action 提交的是mutation,而不是直接变更状态,包含任意的异步操作
var actions ={
    addMutationsCount(context){ // 调用context.commit 提交一个mutation
        context.commit('addNum') // 执行mutations里面的 addNum方法 改变state里面的数据
    }
}

• 暴露 vuex 实例化

const  store = new Vuex.Store({
    state,
    mutations,
    getters,
    actions
})
export default store;

• 组件内使用

import store from '../vuex/store.js'

• 注册

export default {
  name: "Home",
  data() {
    return {
      msg: "你好",
    }
  },
  store,
  methods: {
    addCount(){
      // 改变vuex store里面的数据
      this.$store.commit('addNum') // 触发state里面的数据
    }
  }
};

• 获取state里面的数据

this.$store.state.count

• 触发mutations 改变state里面的数据

this.$store.commit('addNum') // 触发state里面的数据

• 触发actions里面的方法

this.$store.dispatch('addMutationsCount') 

• 获取getters里面的数据

this.$store.getters.computedCount

好了，今天的分享就到这里了！
愿你三冬暖，愿你春不寒；愿你天黑有灯，下雨有伞。

小晴天