vuex学习笔记

# Vuex 学习笔记

标签（空格分隔）： vuex 数据存储

---

## 1. 安装与配置
+ npm i vuex -S
+ 配置步骤
1. 在项目入口文件中导入vuex并挂载
```
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
```
2. 在src文件中创建store文件夹,并在文件夹下创建vuex.js文件,在vuex.js中创建store对象,并向外部暴露
```
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//数据存放在state中
const state = {
  name: 'huwenwei',
  age: 18,
  gender: 'male',
  number: 0,
  info: ''
}
//getters 对数据进行处理,可以理解为计算属性
const getters = {
  changeNumber: (state) => {
    return state.number + 100
  }
}
// mutations 对数据进行修改的函数,注意:只能进行同步操作
const mutations = {
  showInfo (state) {
    state.info = '我的名字叫' + state.name
  }
}
// actions 类似mutations, 不同的是,可以进行异步操作
const actions = {
  changeAge (context) {     //context 上下文的意思,这里是store实例
    setTimeout(() => {
      console.log('changeAge起作用了')
      context.commit('showInfo')
    }, 2000)
  }
}
//new 一个store对象,向外部暴露
export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})
```
3. 在入口文件中导入store文件中的vuex.js,并在Vue实例中注册store
```
import store from './store/vuex'
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})
```
4. 至此,vuex的store中的数据和方法已经能够在各个组件中使用了
## 2. vuex在组件中的使用
+ 原始使用方法
```

```
+ 使用辅助函数使用
```
//通过引入辅助函数,之后把需要用的函数导入到methods中,把属性、计算属性导入到computed中,之后就能在组件中直接用响应的名字来使用响应的属性和方法了,(这里的对应关系辅助函数已经处理好了)
<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
    data: () => ({
    }),
    methods: {
        ...mapActions(['changeAge']),
        ...mapMutations(['showInfo'])
    },
    computed: {
        ...mapState([ "name" , "age" ,"gender" ,"number" ,"info"]),
        ...mapGetters(["changeNumber"])
    }
}
</script>
```