• Vuex
    • 正常使用的顺序
      • 1.修改package.json
      • 2.新建store文件
      • 3.新建vuex/module文件
      • 4.新增文件: src/vuex/mutation_types.js
      • 5.新增路由: src/routers/index.js
    • Computed属性
    • Vuex 原理图

    Vuex

    Vuex 是 状态管理工具. 跟React中的Redux相似，但是更加简洁直观。

    简单的说, Vuex 帮我们管理 “全局变量”, 供任何页面在任何时刻使用.

    跟其他语言中的“全局变量”相比， 使用Vuex 的优点是：

    1. Vuex中的变量的状态是响应式的。 当某个组件读取这个变量时，只要Vuex中的变量发生变化，那么对应的组件就会发生变化（类似于双向绑定）
    2. 用户或者程序无法直接改变Vuex中的变量。必须通过Vuex提供的接口来操作. 这个接口就是通过 “commit mutation”来实现的。

    Vuex 非常重要. 不管是大项目还是小项目,都有用到它的时候. 我们必须会用.

    完整官方文档: https://vuex.vuejs.org/zh-cn/getting-started.html

    Vuex 的内容很庞大，用到了比较烧脑的设计模式（这是由于javascript语言本身不够严谨和成熟决定的），所以我不打算带同学们把源代码和实现机理详细的学一遍。 大家只要可以娴熟的使用就行了。

    下面，我们以一个例子来说明如何使用。

    正常使用的顺序

    假设,我们有两个页面: “页面1” 和”页面2” , 共同使用一个变量: counter. 页面1对 “counter” + 1 后, 页面2的值也会发生变化.

    1.修改package.json

    增加 vuex 的依赖声明，如下：

    1.   "dependencies": {
    2.     "vuex": "^2.3.1"
    3.   },

    如果不确定你的 vuex 用什么版本,就先手动安装一下:

    1. $ npm install vuex --verbose

    然后看安装过来的版本号就可以了.

    2.新建store文件

    文件名： src/vuex/store.js

    这个文件的作用,是在整个Vuejs项目中声明: 我们要使用Vuex进行状态管理了.

    它的内容如下： 

    1. import Vue from 'vue'
    2. import Vuex from 'vuex'
    4. // 这个就是我们后续会用到的counter 状态．
    5. import counter from '@/vuex/modules/counter'
    7. Vue.use(Vuex)
    9. const debug = process.env.NODE_ENV !== 'production'
    10. export default new Vuex.Store({
    11.     modules: {
    12.             counter                // 所有要管理的module, 都要列在这里.
    13.     },
    14.     strict: debug,
    15.     middlewares: []
    16. })

    在上面代码中,大部分是鸡肋代码. 有用的代码只有:

    1. import counter from '@/vuex/modules/counter'
    2. ...
    3.     modules: {
    4.         counter
    5.     }
    6. ...

    这里定义了所有的 vuex module.

    3.新建vuex/module文件

    文件名： src/vuex/modules/counter.js

    内容如下：

    1. import { INCREASE } from '@/vuex/mutation_types'
    3. const state = {
    4.   points: 10
    5. }
    7. const getters = {
    8.   get_points: state => {
    9.     return state.points
    10.   }
    11. }
    13. const mutations = {
    14.   [INCREASE](state, data){
    15.     state.points = data
    16.   }
    18. }
    20. export default {
    21.   state,
    22.   mutations,
    23.   getters
    24. }

    上面是一个最典型的 vuex module, 它的作用就是计数.

    • state: 表示状态. 可以认为state是一个数据库，保存了各种数据。我们无法直接访问里面的数据。
    • mutations: 变化。 可以认为所有的state都是由mutation来驱动变化的。 也可以认为它是个setter.
    • getter: 取值的方法。 就是getter( 跟setter相对）

    我们如果希望”拿到”某个数据，就需要调用 vuex module的getter 方法。我们如果希望”更改”某个数据，就需要调用 vuex module的mutation 方法。

    4.新增文件: src/vuex/mutation_types.js

    1. export const INCREASE = 'INCREASE'

    大家做项目的时候, 要统一把 mutation type定义在这里. 它类似于方法列表.

    这个步骤不能省略。 Vuejs官方也建议这样写。 好处是维护的同学可以看到 某个mutation有多少种状态。

    5.新增路由: src/routers/index.js

    1. import ShowCounter1 from '@/components/ShowCounter1'
    2. import ShowCounter2 from '@/components/ShowCounter2'
    4. export default new Router({
    5.   routes: [
    6.     {
    7.       path: '/show_counter_1',
    8.       name: 'ShowCounter1',
    9.       component: ShowCounter1
    10.     },
    11.     {
    12.       path: '/show_counter_2',
    13.       name: 'ShowCounter2',
    14.       component: ShowCounter2
    15.     }
    16.     ]
    17. })

    6.新增两个页面: src/components/ShowCounter1.vue和 src/components/ShowCounter2.vue

    这两个页面基本一样.

    1. <template>
    2.   <div>
    3.     <h1> 这个页面是 1号页面 </h1>
    4.     {{points}} <br/>
    5.     <input type='button' @click='increase' value='点击增加1'/><br/>
    6.     <router-link :to="{name: 'ShowCounter2'}">
    7.           计数页面2
    8.     </router-link>
    9.   </div>
    10. </template>
    12. <script>
    13. import store from '@/vuex/store'
    14. import { INCREASE } from '@/vuex/mutation_types'
    15. export default {
    16.   computed: {
    17.     points() {
    18.       return store.getters.get_points
    19.     }
    20.   },
    21.   store,
    22.   methods: {
    23.     increase() {
    24.       store.commit(INCREASE, store.getters.get_points + 1)
    25.     }
    26.   }
    27. }
    28. </script>

    可以看出， 我们可以在 <script>中调用 vuex的module的方法。 例如：

    1. increase() {
    2.     store.commit(INCREASE, store.getters.get_points + 1)
    3. }

    这里， store.getters.get_points 就是通过getter获取到 状态“points”的方法。

    store.commit(INCREASE, .. ) 则是 通过 INCREASE 这个action 来改变 “points”的值。

    Computed属性

    Computed 代表的是某个组件(component)的属性, 这个属性是算出来的。 每当计算因子发生变化时，这个结果也要及时的重新计算。

    上面的代码中：

    1. <script>
    2. export default {
    3.   computed: {
    4.     points() {
    5.       return store.getters.get_points
    6.     }
    7.   },
    8. </script>

    就是定义了一个叫做 ‘points’ 的 ‘computed’属性。 然后，我们在页面中显示这个”计算属性”:

    1. <template>
    2.   <div>
    3.     {{points}}
    4.     </div>
    5. </template>

    就可以把 state中的数据显示出来， 并且会自动的更新了。

    重启服务器( $ npm run dev ) , 之后运行, 可以看到如下图所示:

    vuex演示 计数器

    Vuex 原理图

    为了学会本章内容，大家务必亲手敲一敲代码。

    下面是Vuex的原理图.

    Vuex

    可以看到：

    1.总体分成 ： Action, Mutation, State 三个概念. State由Mutation来变化2.Vuex 通过 Action 与后端API进行交互3.Vuex 通过 State 来渲染前端页面。4.前端页面通过触发 Vuex的Action，来提交mutation, 达到改变 “state”的目的。