Vuex的使用

安装Vuex依赖包

npm install vuex --save

在vue脚手架中 src 文件下新建一个 Vuex文件夹，并在此文件夹下加入一个store.js文件

store.js文件内容：

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

const store = new Vuex.Store({
  state: {                       //用于存储数据
    user: 0,
  },
  mutations: {                   //向外暴露方法，用于改变 state 内的值
    setuser (state,id) {         //setuser：方法名 id：外部传进来的参数
      state.user=id;
    }
  },
  actions: {

  }
});
export default store

在main.js下引入

import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import store from './vuex/store'         //刚才创建store.js文件相对地址


Vue.config.productionTip = false;
Vue.use(Vuex);


new Vue({
  store,                               //引入
  el: '#app',
  components: { App },
  template: '<App/>',
})

这样就可以开始使用了

组件内使用

调用Vuex中的值
console.log(this.$store.state.user)                  //0
调用Vuex中的方法
this.$store.commit('setuser');
this.$store.commit('setuser',1);        //setuser：方法名  1：参数

mian.js中使用

store.state.user

 

 

如果您有什么不明白的地方或其它想问的可以关注我的公众号,给我留言,我会尽可能的帮您解决遇到的问题

ps:如果您对摄影感兴趣,也可以关注我的公众号,不定时会分享自己的摄影经验和调色设定,欢迎交流,哈哈哈哈哈