vuex学习

2018农历7月7日，哈哈，在办公室写博客......

思考一个问题：什么时候要用vuex?

答：如果一个状态（变量）在多个页面的组件“需要使用，需要改变，需要同步”，那就可以使用vuex。

vuex就只有以下5个属性：很简单吧！relax,是真的简单！

工作原理：

先来看看目录的组织结构

来一个世界上最简单的vuex示例，附详细解释：

// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)
const store = new Vuex.Store({
  state: { // 固定写法，定义要用Vuex管理的状态 ，“状态”实际上就是我们通常说的“变量”
    count: 0 // 这个属性“命名任意”我们用ajax 等任何你喜欢的方式取得，也可直接定义
  },
  mutations: { // 固定写法，我想改变state的状态了，我就定义它，但这“只能用于同步的方式”更改state下的属性如state.count
    /**
     * 详细解释：increment （解释多代码少，各位请珍惜）
     * （1）increment 是方法名（任意命名，也就是官方说的type，它其实就是用来保存事件 handler 的一个普通变量）;
     * （2）（state）,大家都知道state是形参，只要我们随意给increment 方法定义一个参数，Vuex内部将会自动把state传给 increment 方法。
     * （3） 那怎么调用 increment 方法呢？
     *       a. 我们可以在任意组件中调用increment 来改变state.count，调用写法:store.commit('increment')
     *       b. 在vue任意模块中调用,因为store = this.$store, 写法this.$store.commit('increment')
     */
    increment (state) {
      state.count++
    }
  }
})

我在模块开发中是如何调用在mutations内定义的方法呢？，如下图分两步

Step 1:

Step 2: 下面是任意组件中的代码片段

在组件的template中查看改变的结果：当然你可以多定义几个组件，看看状态是不是同步改变了

ok! 成功 ，^_^!

更高级一点的mutations,就是传一个额外的参数进来，参数可以是对象or简单值.

请看代码

1.传简单值：

调用：

2.传对象：写法会有一点点不同

调用写法1：

调用写法2：

到了这里我们就把 Vuex 的两大核心属性学完了，至于state的  import mapState from "Vuex" 有兴趣就自己看一下，没兴趣就不要看了,开发项目基本就够用了。