搭建Vue项目环境

在使用Vue进行组件通信时，一般情况下我们会通过传递数据或者组件的状态来实现。然而，随着需要管理的状态越来越多，代码会变得庞大而混乱。为了解决这个问题，Vue引入了Vuex，将公用的状态抽离出来放在一个容器中，并通过一定的规则进行管理。

首先，在Git命令行中执行以下命令来搭建项目环境：

npm install --global vue-cli

vue init webpack vue-demo

cd vue-demo

npm install

npm run dev

接下来，删除默认的组件，并将整理如下：

Vuex的安装和配置

完成基本环境搭建后，开始安装Vuex。

npm install vuex --save-dev

在main.js中引入Vuex并注册store：

import Vue from 'vue'
import Vuex from 'vuex'
import store from './vuex/store'
(Vuex)
new Vue({
  el: '#app',
  store,
  template: '',
  components: { App }
})

在src目录下创建vuex目录，并在该目录下创建store.js，用于存放所有的状态。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
(Vuex)
const store  new ({
  state: {
    userName: 'John'
  }
})
export default store

将状态渲染到组件中

在components目录下创建组件，通过计算属性获取store中保存的状态值并渲染到组件中：

lt;templategt;
  lt;divgt;
    lt;h1gt;{{ userName }}lt;/h1gt;
  lt;/divgt;
lt;/templategt;
lt;scriptgt;
  export default {
    computed: {
      userName() {
        return this.$
      }
    }
  }
lt;/scriptgt;

在中引入组件：

lt;templategt;
  lt;div id"app"gt;
    lt;Main /gt;
  lt;/divgt;
lt;/templategt;
lt;scriptgt;
import Main from ''
export default {
  components: {
    Main
  }
}
lt;/scriptgt;

现在，页面上可以读取到store容器中state的userName的值。如果修改了userName的值，页面上也会相应地发生变化。

通过交互改变状态

我们可以通过一些交互操作来改变状态，观察组件是否能接收到状态的变化。

在components目录下创建组件：

lt;templategt;
  lt;divgt;
    lt;button @click"changeUserName"gt;Change Usernamelt;/buttongt;
  lt;/divgt;
lt;/templategt;
lt;scriptgt;
export default {
  methods: {
    changeUserName() {
      this.$  'Jane'
    }
  }
}
lt;/scriptgt;

当点击按钮时，改变store中userName的值，Main组件中的userName值也会相应地更新。这种方式非常直观易懂。

Vuex推荐的状态改变方法

Vuex提供了一种更优雅的方式来改变状态，即使用mutations。

在store.js中创建mutations对象，用于存放被修改的状态：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
(Vuex)
const store  new ({
  state: {
    userName: 'John'
  },
  mutations: {
    showUserName(state, msg) {
        msg
    }
  }
})
export default store

其中，showUserName是一个mutation函数，第一个参数state即为$，第二个参数msg需要从外部传入。通过中的点击事件来传递msg：

lt;templategt;
  lt;divgt;
    lt;button @click"changeUserName"gt;Change Usernamelt;/buttongt;
  lt;/divgt;
lt;/templategt;
lt;scriptgt;
export default {
  data() {
    return {
      msg: 'Jane'
    }
  },
  methods: {
    changeUserName() {
      this.$('showUserName', )
    }
  }
}
lt;/scriptgt;

这样，通过$将的值提交给showUserName，状态就会相应地改变。这就是Vuex的最基本用法和作用。

总结

通过以上的步骤，我们成功搭建了基于vue-cli和webpack的Vue2.0项目，并使用Vuex进行组件通信。通过Vuex，我们可以更好地管理和改变组件间的状态，使代码更加清晰和可维护。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。