Vuex的简单理解

版权声明：转载请注明出处： https://blog.csdn.net/qq_38262910/article/details/86244853

先上图：

对于上图，我们只需要看实线箭头部分的数据流动即可。其实我们需要做的就是让该数据正常流通即可

1.安装引入

 npm install vuex --save

然后在src目录下新建目录store,store目录下新建文件index.js
在index.js文件里面写入下图代码

然后再在main.js文件中

import store from './store'

然后在vue实例中注册一下

new Vue（{
   store
}）

这样就可以了

2.使用

2.1-state
在上一步暴露出来的store对象中写入状态

 state: {
    city: '北京'
  },

然后在一个可以显示出来的页面使用

this.$store.state.city

将state中的数据显示出来

接下来我们就让点击按钮后，state中的city改变为北京

1.首先给button按钮一个事件，然后让他执行下面代码

this.$store.dispatch("changeCity","北京");
这步可以简单理解为，点击按钮后，给仓库提交一个动作名为"changeCity"的动作事件，携带的参数是"北京"。

2.在src/store/index.js的state对象后面加上动作事件

actions: {
   changeCity(ctx,city) {
       ctx.commit("changestate",city);
   }
 }

这步可以理解为changeCity这个动作提交一个"changestate"事件，携带的参数是city

3.在src/store/index.js的actions对象后面加上突变事件

 mutations: {
   changestate(state,city) {
          state.city= city
          .....
    }
 }

这步可以理解为，actions动作提交了一个changestate事件后，我们mutations（突变）拿到该事件并执行

state.city = city

上面代码意思将传过来的city这个参数的数值赋值给state中的city。
这样一来，一个简单的store就完成了
下面测试一下，点击按钮前显示上海

点击按钮后显示北京

这样一来，其实这个数据的流向是不是跟最上面的图是一样的呢？