Vuex (一) ：state

Vue中文版文档

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

• 利用Vue CLI创建一个普通的项目在此基础上进行Vuex的学习

• 我这里采用 vue ui界面创建，只选择了Router，以及Babel （Router其实也不用选择,这里用不到）

  

• 项目创建完成 进入项目目录添加Vuex依赖

  vue add vuex
  

• 添加完成后package.json如下：

  {
    "name": "vuexlearning",
    "version": "0.1.0",
    "private": true,
    "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build"
    },
    "dependencies": {
      "vue": "^2.6.6",
      "vue-router": "^3.0.1",
      "vuex": "^3.0.1"
    },
    "devDependencies": {
      "@vue/cli-plugin-babel": "^3.4.0",
      "@vue/cli-service": "^3.4.0",
      "vue-template-compiler": "^2.5.21"
    },
    "postcss": {
      "plugins": {
        "autoprefixer": {}
      }
    },
    "browserslist": [
      "> 1%",
      "last 2 versions",
      "not ie <= 8"
    ]
  }
  

• 可以看到项目src目录下多了一个文件store.js

  import Vue from 'vue'
  import Vuex from 'vuex'
  
  Vue.use(Vuex)
  
  export default new Vuex.Store({
    state: {
  
    },
    mutations: {
  
    },
    actions: {
  
    }
  })
  

• 我们将他自己生成的这个文件删除我们新建自己的目录及文件

• 此时项目结构如下：store文件夹各个文件内容如下

  

全局状态值的获取

从简单的计数开始

• 在src/store/state.js中定义一个值 count

const state = {
    count: 0
}
export default state;

• 需要注意src/store/state.js文件必须在src/store/index.js中引入并使用 项目结构图中红色边框圈起来部分以及下面的 New Vuex.store()…
• 我们想要的到state中的值一般都在计算属性中或的 所以修改Home.vue

<template>
	<div class="home">
        <HelloWorld msg="Welcome to Your Vue.js App"/>
        <p><span>Current Count: </span> {{count}}</p>
    </div>
</template>
<script>
    // @ is an alias to /src
    import HelloWorld from '@/components/HelloWorld.vue'
    export default {
        name: 'home',
        components: {
            HelloWorld
        },
        computed: {
            count() {
                return this.$store.state.count;
            }
        }
    }
</script>

• 启动项目我们就可以Current Count: 0

如上我们就简单的做了一个count的状态管理 也取得了其相应的数据

模块的定义

• 实际开发中我们会对vuex进行拆分 sys模块，user模块，menu模块等等

• 我们在src/store目录下新建模块目录modules并在此目录下建立 user.js文件

• 此时项目结构以及 src/store/index.js,新建文件user.js内容如下

模块中的值获取

• 在 src/store/modules/user.js 中 添加一个值 userName

// src/store/modules/user.js
...
state: {
    userName: 'Aaron'
}
...

我们想要取得模块中定义的值就不能像前面一样使用this.$store.state.userName这样取了,需要加上命名空间:

this.$store.state.user.userName

• Home.vue中 template 添加代码<p><span>UserName: </span> {{userName}}</p>

• Home.vue中 计算属性中添加代码

userName(){
	return this.$store.state.user.userName
}

• 启动项目,页面展示如下：

通过工具类获取值

vuex 提供一个工具类mapState 可以通过这个类来获取响应的值

• 引入工具来mapState

// 引入mapState
import { mapState } from 'vuex';

• 修改计算属性中获取count 的方法

computed: {
    /* count() {
      return this.$store.state.count;
    },
    userName(){
      return this.$store.state.user.userName
    } */
    ...mapState([
        "count"
    ])
},

• 启动项目我们可以看到数据依旧能获取到,这种方式也适用于module中,当然和根状态中获取不同的是 需要加入module名称，并且 module中需要开启命名空间namespaced: true,：

// user.js
export default {
    namespaced: true, // 开启命名空间
    state: {
        userName: 'Aaron'
    },
    ...
}

computed: {
    /* count() {
      return this.$store.state.count;
    },
    userName(){
      return this.$store.state.user.userName
    } */
    ...mapState([
        "count"
    ]),
    ...mapState('user',[ // 第一个参数为命名空间
        "userName"
    ])
}

• 开启命名空间还有另外一种方式取得module中的数据： 通过 createNamespacedHelpers获得

import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('user') // 这里需要传入命名空间

computed: {
    /* count() {
      return this.$store.state.count;
    },
    userName(){
      return this.$store.state.user.userName
    } */
    /* ...mapState([
      "count"
    ]),
    ...mapState('user',[
      "userName"
    ]) */
    ...mapState([ // 这里不需要传入命名空间
        "userName"
    ])
}

• 完整代码如下

<template>
  <div class="home">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <!-- <p><span>Current Count: </span> {{count}}</p> -->
    <p><span>UserName: </span> {{userName}}</p>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

// import { mapState } from 'vuex'
import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('user') // 这里需要传入命名空间

export default {
  name: 'home',
  components: {
    HelloWorld
  },
  computed: {
    /* count() {
      return this.$store.state.count;
    },
    userName(){
      return this.$store.state.user.userName
    } */
    /* ...mapState([
      "count"
    ]),
    ...mapState('user',[
      "userName"
    ]) */
    ...mapState([
      "userName"
    ])
  },
}
</script>

说明 mapState 中传入参数

...mapState([
	"count"
])

这里传入的count是你在state中定义的已存在的值， 并且这个值会自动映射成count ，在页面上取的时候就通过这个值来取 {{count}}

假设你这里传的是"a" 则在state中要存在一个值 a: XXXX , 页面取值也就是 {{a}}