vue + vuex 的状态管理的简单使用

每一份总结总会有一份收获……

VUE + vuex 的状态管理的简单使用：

使用webpack开发VUE的组件中，每个组件的样式，js，数据，一般情况下都是独立的。但是有些时候，我们希望有些数据是共享的，比如组件A中点击事件操作某个标签的v-show=’flag’进行显示和隐藏，组件B中也需要操作该标签的显示个隐藏。在这种情况下，结合父组件可以实现同时操作，但是你会发现你的代码比较繁琐，当应用程序变得庞大时，也就很难管理和维护这些状态。

而VUEX则提供了统一集中的状态管理。

vuex的核心：

流程：组件事件>dispatch>Actions（数据获取，如从后台获取数据）>commit>Mutations（数据操作,改变状态）>state>render>组件视图

在actions获取数据，在mutations处理数据,，在getters提供数据，这样就很方便的管理了数据状态。

如何简单的使用vuex？

首先使用vue-cli手脚架初始化了一个demo
安装vue-cli:

npm install vue-cli -g

初始化demo，如果看不懂提示则一路按回车即可。

vue init webpack-simple demo    //使用的是简化版的webpack，完整版则是去掉-simple

当有提示有 ：
cd demo
npm install
npm run dev
则初始化完成。

切换文件夹：

cd demo

安装node_modules:

npm install

运行项目：

npm run dev

最后的目录结构：

packege.json:

"dependencies": {    "vue": "^2.3.3",    "vuex": "^2.3.1"//需要自己安装:npm install vuex --save  },  "devDependencies": {    "babel-core": "^6.0.0",    "babel-loader": "^6.0.0"，    "babel-preset-env": "^1.5.1",    "cross-env": "^3.0.0",    "css-loader": "^0.25.0",    "file-loader": "^0.9.0",    "node-sass": "^4.5.0",    "sass-loader": "^5.0.1",    "vue-loader": "^12.1.0",    "vue-template-compiler": "^2.3.3",    "webpack": "^2.6.1",    "webpack-dev-server": "^2.4.5"

小例子：

在src文件夹创建vuex的store目录结构：

└── src    ├── assets    └── store        ├── index.js          # 我们组装模块并导出 store 的地方        ├── actions.js        # 根级别的 action        ├── mutations.js      # 根级别的 mutation        ├── getters.js        //提供数据        ├── types.js          //类型        └── modules           //分模块            ├── cart.js       # 购物车模块            └── products.js   # 产品模块    ├── App.vue    ├── main.js

从App.vue 开始缕。

1.首先我们希望是点击增加按钮时触发increment事件时count变更，在不实用VUEX之前是直接写在了methods里，这样其他地方也想操作count时，就需要写很长的代码，同时也不好管理。使用VUEX时，则提交给mapActions进行统一管理。

<template>  <div id="app">      <h3>welcome vuex-demo</h3>      <input type="button" value="增加" @click="increment">      <input type="button" value="减少" @click="decrement">      <div>        现在数字为: {{count}}, 它现在是 {{even}} //渲染      </div>  </div></template><script>import {mapActions,mapGetters} from 'vuex'//导入vuex的mapActions,mapGetters方法export default {    computed:mapGetters([           //使用mapGetters获取改变后的数据            'count',            'even'    ]),    methods:mapActions([         //使用mapActions提交方法到了actions         'increment',         'decrement'    ]),}</script>

2. actions收到数据后进一步处理，如果有请求后台数据时，在这里请求

actions.js:

import * as types from './types'//导入所有定义的类型， *代表导入所有，当然也可以不实用types，type的作用是当作参数传递export default{    increment:({ //从app.vue接收到的increment方法进一步处理        commit //接收commit参数    })=>{        commit(types.INCREMENT);//进一步的提交到muations ，types.INCREMENT 是参数，等于INCREMENT 如果没有定义types，则传入increment，参数名称可以自定义，但建议最好使用types统一    },    decrement:({        commit    })=>{        commit(types.DECREMENT);    }}

types.js:

export const INCREMENT = 'INCREMENT'//设置常量，用作参数传递export const DECREMENT = 'DECREMENT'

3. actions 提交后commit后，接着是mutations进行处理

mutations.js:

import {    INCREMENT,  //导入定义的types    DECREMENT} from './types'import getters from './getters'   // 导入gettersconst state = {//设置状态，在这里定义数组，布尔，对象    count:20,    //flag:false}const mutations = {//定义mutations    [INCREMENT](state){ //[INCREMENT]是引用types变量,接收state参数，在这里更改和操作数据状态，        state.count++;        //flag:false;    },    [DECREMENT](state){        state.count--;    }}export default{//导出    state,    mutations,    getters}

gtters.js文件：

export default{    count:(state)=>state.count,//接收state，并return state.count    even:(state)=>state.count%2==0?'偶数':'奇数'}

4. 在主文件中引用actions ，mutations

index.js:

import Vue from 'vue'import Vuex from 'vuex'import actions from './actions'//引入actionsimport mutations from './mutations'//引入mutationsVue.use(Vuex)//vue使用vuexexport default new Vuex.Store({//导出    modules:{        mutations    },    actions})

5. 最后在main.js中注入：

main.js:

import Vue from 'vue'import App from './App.vue'import store from './store'//引入store的index.jsnew Vue({    store,//注入    render: h => h(App)}).$mount('#app')

这样就完成了一个简单的vuex的小例子，使用了vuex后，我们只需要管理store 里的actions,mutations,getters，即可。

只有使用了，才能真正体会vuex的核心思想，个人觉得管理数据非常方便。

使用对象拓展运算符分发action

app.vue中的methods和comouted是被mapActions，mapGetters占用了，无法写组件自己独立的方法。有时我们还想使用组件自己的方法时，因为有些数据不共享，所以我们希望写在组件里就可以。那么则可使用使用对象拓展运算符来解决。

前面是这样写的，想增加方法时，无法增加，解决办法请往下看。

import {mapActions,mapGetters} from 'vuex'//导入vuex的方法export default {    computed:mapGetters([//获取数据            'count',            'even'    ]),    methods:mapActions([//提交方法到了actions         'increment',         'decrement'    ]),}

首先修改App.vue如下：

<script>    import {mapActions,mapGetters} from 'vuex'    export default {        computed:{            ...mapGetters([  //...是对象拓展元算符                'count',                'decre'            ])             b:{//这里写计算属性                  get:()=>this.a+2,                  set(val){                      this.a=val;                  }            }        },        methods:{            ...mapActions([                'increment',                'decrement'            ]),            fn(){                console.log('这是组件的方法');            }        },        mounted(){            this.fn();//调用组件的方法        }    }</script>

但你会发现…mapActions 和…mapGetters这方法无法使用，因为浏览器还没支持，所以会报错。解决办法请往下：

解决vuex的…mapGetters和…mapActions报错的方法

1.安装babel插件：

npm install babel-plugin-transform-object-rest-spread --save-dev

1. 安装es2015插件，如果安装了babel-preset-env插件，就不用安装es2015了

npm install babel-preset-es2015 --save-dev

3 . 修改.babelrc文件：

{  "presets": [    ["env", { "modules": false }], //如果有了这个，就不用重新配置下面的es2015了    ["es2015", { "modules": false }]  ],   "plugins": ["transform-object-rest-spread"]}

这样就可以解决对象拓展运算符的报错。