首页 > 代码库 > vuex----------state的基础用法
vuex----------state的基础用法
先使用vue cli构建一个自己的vue项目
import Vue from ‘vue‘import Vuex from ‘vuex‘Vue.use(Vuex)const store = new Vuex.Store({ state: { count: 0 }
export default store
现在所有的状态,也就是变量都放到了test.js中，那我们组件怎么才能获取到状态修值呢？这里有两个步骤需要操作
1， vue 提供了注入机制，就是把我们的store 对象注入到根实例中。vue的根实例就是 new Vue 构造函数，然后在所有的子组件中,this.$store 来指向store 对象。在test.js 中，我们export store, 把store已经暴露出去了，new Vue() 在main.js中，所以直接在main.js 中引入store 并注入即可。
import Vue from ‘vue‘import App from ‘./App‘import router from ‘./router‘import store from ‘./store/test‘Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: ‘#app‘, router, store, template: ‘<App/>‘, components: { App }})
2， 在子组件中,用computed 属性, computed 属性是根据它的依赖自动更新的。所以只要store中的state 发生变化，它就会自动变化。在display.vue 中作下面的更改， 子组件中 this.$store 就是指向store 对象。我们把 test.js 里面的count 变为8, 页面中就变为了8。
<template> <div> <h3>Count is {{count}}</h3> </div></template><script> export default { computed: { count () { return this.$store.state.count } } }</script>
3， 通过computed属性可以获取到状态值，但是组件中每一个属性（如：count）都是函数,如果有10个，那么就要写10个函数，且重复写10遍return this.$store.state，不是很方便。vue 提供了 mapState 函数，它把state 直接映射到我们的组件中。
当然使用mapState 之前要先引入它。它两种用法，或接受一个对象，或接受一个数组。还是在display.vue 组件下。
对象用法如下：
<script> import {mapState} from "vuex"; // 引入mapState export default { // 下面这两种写法都可以 computed: mapState({ count: state => state.count // 组件内的每一个属性函数都会获得一个默认参数state, 然后通过state 直接获取它的属性更简洁 count: ‘count‘ // ‘count‘ 直接映射到state 对象中的count, 它相当于 this.$store.state.count, }) }</script>
数组的方法如下：
<script> import {mapState} from "vuex"; export default { computed: mapState([ // 数组 "count" ]) }</script>
4, 还有最后一个问题，如果我们组件内部也有computed 属性怎么办？它又不属于mapState 中。那就用到了对象分割，把mapState函数生成的对象再分割成一个个的，就像最开始的时候，我们一个一个罗列计算属性，有10个属性，我们就写10个函数。
es6中的... 就是分割用的，但是只能分割数组。在ECMAScript stage-3 阶段它可以分割对象，所以这时还要用到babel-stage-3; npm install babel-preset-stage-3 --save-dev, 安装完全后，一定不要忘记在babelrc 就是babel 的配置文件中，写入stage-3,
否则一直报错。在页面中添加个 p 标签，显示我们组件的计算熟悉
babelrc
{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-3" ], "plugins": ["transform-runtime"], "env": { "test": { "presets": ["env", "stage-3"], "plugins": ["istanbul"] } }}
display.vue 组件更改后
<template> <div> <h3>Count is {{count}}</h3> <p>组件自己的内部计算属性 {{ localComputed }}</p> </div></template><script> import {mapState} from "vuex"; export default { computed: { localComputed () { return this.count + 10; }, ...mapState({ count: "count" }) } }</script>把test.js 中state.count 改为10, 查看一个效果
vuex----------state的基础用法