Vuex

一、Vuex详解

Vuex采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

二、配置

1、新建store文件-->index.js,进行如下配置，在main.js中进行引入

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  //数据，相当于data
  state:{},
  getters:{},
  //里面定义方法，操作state
  mutations:{},
  //操作异步操作mutation
  actions:{},
  modules:{}
})

2、main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false

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

三、核心概念

vuex中一共有五种状态，state、Getter、Mutation、Action、Module

1、State

提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，类似于data

在vuex中state定义数据，可以在任何组件中进行调用

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  //数据，类似于data
  state:{
    name:'张三',
    age:12,
    count:0
  }
})

调用：

方法一：

在标签中直接使用

<p>{{$store.state.name}}</p>
<p>{{$store.state.age}}</p>

方法二：

this.$store.state.name

方法三：

从vuex中按需导入mapstate函数

import {mapState} from 'vuex'

computed:{
  ...mapState(["name","age","sex"])
}

//直接使用
<p>$store.state.name</p>
<p>$store.state.age</p>
//辅助函数
<p>{{ name + age + sex }}</p>

2、Mutation

更改vuex的store中的状态的唯一方法是提交mutation。vuex中的mutation非常类似于事件：每个mutation都有一个字符串的事件类型（type）和一个回调函数（handler）。这个回调函数就是我们实际进行状态更改的地方，并且他会接受state作为第一个参数。

在vuex中定义：

其中参数state参数是必须的，也可以自己传递一个参数，如下代码，进行计数器的加减操作，加法操作时可以根据所传递参数大小进行相加，减法操作没有传参每次减一

state:{
  name:'张三',
  age:12,
  count:0
},
getters:{},
//里面定义方法，操作state方法
mutations:{
  addcount(state,num) {
    state.count = state.count + num
  },
  reduce(state) {
    state.count -- 
  }
}

在组件中使用：

<button @click="btn">点我增加store仓库中的数据</button>
<button @click="btn1">点我减少store仓库中的数据</button>

方法一：

使用commit触发Mutation操作

methods:{
  btn() {
    this.$store.commit("addcount",10)
  },
  btn1() {
    this.$store.commit("reduce")
  }
}

方法二：

使用辅助函数进行操作

methods:{
  ...mapMutations(["addcount","reduce"]),
  btn(){
    this.addcount(10)
  },
  btn1(){
    this.reduce()
  }
}

3、Action ---- 进行异步操作

ActionyuMutation相似，一般不用Mutation异步操作，使用Action原因：方便管理维护

在vuex中定义：

actions:{
  asyncAdd(context){
    //异步
    setTimeout(()=>{
      context.commit('reduce')
    },1000)
  }
}

在组件中使用

方法一：直接使用dispatch触发Action函数

this.$store.dispatch('asyncAdd')

方法二：使用辅助函数

...mapActions(["asyncAdd"]),
btn2(){
  this.asyncAdd()
}

4、Getter

类似于vue的computed进行缓存，对于Store中的数据进行加工处理形成新的数据

5、Modules

当遇见大型项目时，数据量大，store会显得很臃肿

为了解决以上问题，Vuex允许我们将store分割成模块（module）。每个模块拥有自己的state、mutation、action、getter，甚至是嵌套子模块--从上至下进行同样方式的分割：

modules:{
  cityModules:{
    namespaced:true,
    state:{
      cityname:'中国'，
    }，
    mutations:{
      cityfunction(state) {
        state.cityname = '日本'
      }
    }
  },
  userinfo:{
    state:{
      username:'一一'
    }
  }
}

this.$store.state.cityModules.cityname

默认情况下，模块内部的action和mutation仍然是注册在全局命名空间的--这样使得多个模块能够对同一个action和mutation作出响应。