Vuex的基本使用

Vuex的基本使用

简单的案例

我们还是实现一下之前简单的案例

首先，我们需要在某个地方存放我们的Vuex代码：

这里，我们先创建一个文件夹store，并且在其中创建一个index.js文件

在index.js文件中写入如下代码：

挂载到Vue实例中

其次，我们让所有的Vue组件都可以使用这个store对象

来到main.js文件，导入store对象，并且放在new Vue中

这样，在其他Vue组件中，我们就可以通过this.$store的方式，获取到这个store对象了

使用Vuex的count

好的，这就是使用Vuex最简单的方式了。

我们来对使用步骤，做一个简单的小节：

1.提取出一个公共的store对象，用于保存在多个组件中共享的状态

2.将store对象放置在new Vue对象中，这样可以保证在所有的组件中都可以使用到

3.在其他组件中使用store对象中保存的状态即可

通过this.$store.state.属性的方式来访问状态

通过this.$store.commit(‘mutation中方法’)来修改状态

注意事项：

我们通过提交mutation的方式，而非直接改变store.state.count。

这是因为Vuex可以更明确的追踪状态的变化，所以不要直接改变store.state.count的值。