Vuex

什么是Vuex

vuex是一个专门为vue.js应用程序开发的状态管理模式。通俗点说就是我们项目中需要共享的一些数据的管理容器，这里的状态就是数据。

那么什么情况下才应该使用vuex呢？

简单的说就是当你在构建一个中大型单页用的时候，需要在组件外部管理状态，这个时候vuex就是最好的选择。

vuex在项目中的应用和项目中的使用过程和搭建过程

第一步搭建项目：

npm install vuex --save

第二步引用vuex：
在项目目录中创建一个store的文件夹，在文件夹下创建index.js文件，文件中引入vue和vuex

 1. import Vue from 'vue' 
 2. import Vuex from 'vuex'

之后引用vuex

Vue.use(Vuex)

第三步在index.js中创建state仓库:
在state中存放公用的数据

const state = {
    count:1
    }

 1. //封装state仓库让外部可以使用
 2. 
 3.export default new Vuex.Store({
 4.    state
 5. }）

第四步：在main.js中引入store.js

import store from ‘./store’;

new Vue({
router,
store,
render: h => h(App)
}).$mount(’#app’)

第五步：组件内使用vuex的值

computed: {
count() {
return this.$store.state.count;//获取vuex的值
}
},

第六步：触发里面的函数，改变里面的值

methods:{
click_first(){
//this.$store.state.count+=1;
  this.$store.commit('increment');
}

vuex的五大核心

State
State是用来存放数据的，通常将全局数据将保存在这里。

export default new Vuex.Store({
    state: {
        msg: 'hello world'
    }
})

<template>
  <div id="app">{{msg}}</div>
</template>

<script>

export default {
  data() {
    return {
      msg: this.$store.state.msg
    };
  }
};
</script>

在vue组件中我们可以通过this.$store.state来获取vuex下的state状态。
辅助函数
通过辅助函数，我们可以快速的获取到State中存放的数据。

<template>
  <div id="app">{{msg}}</div>
</template>

<script>
import { mapState } from "vuex";

export default {
  computed:mapState({
    msg: item => item.msg
  })
};
</script>

对于大量数据的时候设置使得代码臃肿，我们可以使用…展开运算符。

<template>
  <div id="app">{{msg}}{{msg2}}</div>
</template>

<script>
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState(["msg","msg2"])
  }
};
</script>

Getter
有些时候我们需要从store中的state中返回特定的模板或者计算，这个时候我们就需要用到Getter

<template>
  <div id="app">{{print}}</div>
</template>

<script>

export default {
  data(){
    return {
      print: this.$store.getters.print
    }
  }
};
</script>

辅助函数
辅助函数的用法都是一致的，但是在实际开发流程中，模块可能是不能人员开发的，所以我们可以重命名避免与别人的模块命名冲突。

<template>
  <div id="app">{{userinfo}}</div>
</template>

<script>
import { mapState, mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters({
      userinfo: "print"
    })
  }
};
</script>

Mutation 异步操作
Mutation 使用来修改state中的数据，不支持异步修改。

Action
Action 和 Mutation 都是修改state中的数据，唯一的区别就是Action支持异步调用Mutation来修改。
Module
我们将store分割成模块，每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块，这样的话就解决了多人写作开发中同名数据发生冲突导致被修改。

export default new Vuex.Store({
	// ......
    modules: {
        moduleA: {
            namespaced: true,
            state: {
                name: 'moduleA'
            },
            getters: {},
            mutations: {
                changeName(state, payload) {
                    console.log(payload)
                    state.name = payload
                }
            },
            actions: {
                asychangeName({ commit }, payload) {
                    commit('changeName', payload);
                }
            }
        },
        moduleB: {
            namespaced: true,
            state: {
                name: 'moduleB'
            },
            getters: {},
            mutations: {
                changeName(state, payload) {
                    console.log(payload)
                    state.name = payload
                }
            },
            actions: {
                asychangeName({ commit }, payload) {
                    commit('changeName', payload);
                }
            }
        },
    }
})

在模块内我们写有两个独立的模块moduleA和moduleB，每个模块也有着独立的五大核心概念。

<template>
  <div id="app">
    {{moduleA}}
    <br />
    {{moduleB}}
    <br />
    <button @click="setage">修改</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  methods: {
  	// 收集并重命名模块A中的Action
    ...mapActions("moduleA", {
      asychangeModuleA: "asychangeName"
    }),
  	// 收集并重命名模块B中的Action
    ...mapActions("moduleB", {
      asychangeModuleB: "asychangeName"
    }),
    setage() {
  	  // 修改模块A中的数据
      this.asychangeModuleA("This is the value of moduleA I modified").then(() => {
        console.log("修改moduleA成功");
      });
  	  // 修改模块B中的数据
      this.asychangeModuleB("This is the value of moduleB I modified").then(() => {
        console.log("修改moduleB成功");
      });
    }
  },
  computed: {
  	// 收集并重命名模块A中的State
    ...mapState("moduleA", {
      moduleA: state => state.name
    }),
  	// 收集并重命名模块B中的State
    ...mapState("moduleB", {
      moduleB: state => state.name
    })
  }
};
</script>

veux流程图

vuex辅助函数

1. Vue的辅助函数

mapState、mapGetters、mapActions、mapMutations

2.mapState 辅助函数

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键

3.如何使用
在使用mapState之前,要导入这个辅助函数。

import { mapState } from ‘vuex’

computed可以接收mapState函数的返回值,你可以用代码中的三种方式去接收store中的值。

 computed: mapState({
    count: 'count', // 第一种写法
    sex: (state) => state.sex, // 第二种写法
    from: function (state) { // 用普通函数this指向vue实例,要注意
      return this.str + ':' + state.from
    },
    // 注意下面的写法看起来和上面相同,事实上箭头函数的this指针并没有指向vue实例,因此不要滥用箭头函数
    // from: (state) => this.str + ':' + state.from
    myCmpted: function () {
      // 这里不需要state,测试一下computed的原有用法
      return '' + this.str
    }
  }),

computed可以接收mapState函数的返回值,你可以用代码中的三种方式去接收store中的值,具体可以看注释。