在项目中如何使用vuex实现数据共享（一）

安装vuex

npm install vuex --save

在src文件夹下创建一个store文件夹
在store文件夹下新建一个index.js文件夹

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    city: '北京',
  },
});

然后在main.js里面导入index.js

import store from './store';
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

如何使用公用的数据呢

 {{this.$store.state.city}}

在项目中如何使用vuex实现数据共享（一）

如何更改数据呢
首先要派发一个dispatch

methods: {
    handleClick(val) {
      this.$store.dispatch('changeCity', val);
    },
  },

这样是没有效果的，需要在actions里面定义同样的方法名

export default new Vuex.Store({
  state: {
    city: '北京',
  },
  actions: {
    // 两个参数
    // 上下文
    // 传过来的数据
    changeCity(ctx, city) {
      console.log(city);
    },
  },
});

然后在actions执行的时候调用mutations
如何调用呢
使用commit触发mutations里面的changeCity方法

 changeCity(ctx, city) {
      ctx.commit('changeCity', city);
    },

 mutations: {
    changeCity(state, city) {
      this.state.city = city;
    },
  },

index文件

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    city: '北京',
  },
  actions: {
    // 两个参数
    // 上下文
    // 传过来的数据
    changeCity(ctx, city) {
      ctx.commit('changeCity', city);
    },
  },
  mutations: {
    changeCity(state, city) {
      this.state.city = city;
    },
  },
});

在项目中如何使用vuex实现数据共享（一）

相关推荐