快速入门 vue持久化之vuex！！！

VueX

Vuex是一个专为Vue.js应用程序开发的状态管理模式 ，可以方便我们在vue中进行数据通信，共享

有了vuex，在vue中，各个组件都可以共同访问一个vuex存储仓库

---

• 安装vuex

  cnpm install --save vuex

  安装vuex至当前项目目录下，并写入依赖文件

• vue-cli工程配置vuex

在项目文件夹下与router目录平级，创建store文件夹，并在目录下创建index.js

// /store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {data : "需要共享的数据"}
})

export default store

在项目主要的main.js文件中引入该文件，使vue注册并使用vuex实例对象，注意当前store.js文件与main.js同级

import Vue from 'vue'
import App from './App'
import router from './router'

import store from './store' // 导入vuex实例

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store, // 此处使用vue-store状态管理
  router,
  components: { App },
  template: '<App/>'
})

state

用来管理公共数据，所有的vuex的公共数据都应放在Store的state中

const store = new Vuex.Store({
    state: {count : 0}
})

访问数据

• 组件中访问

this.$store.state.count

• 模版中访问

{{ $store.state.count }}

• mapState访问

import {mapState} from vuex

mapState

可以使用mapState方法将全局数据映射为当前组件的计算属性

computed: {
    ...mapState(['count']) // 使用展开运算符，映射计算属性
}

Mutations

Vuex中，不允许在组件中直接操作数据，比如下面错误的代码

this.store.state.count++

正确的方式应该是通过mutations属性中的函数进行修改，可以监控变量的改变来源，对代码维护更加友好

修改数据

比如对state中某个变量进行操作

export default new Vuex.Store({
  state: {count: 0},
  mutations: {
    add(state) { // 参数代表当前全局数据对象state
      state.count++ // 自增
    }
  }
})

使用mutations方法，在组件中，通过this.$store.commit使add方法触发

add() {
    this.$store.commit("add")
}

如果希望在调用mutations方法时传入参数，可以在定义mutations方法时额外维护参数

mutations: {
    add(state, num) { // 参数代表当前全局数据对象state
        state.count += num // 自增
    }
}

那么在组件中，在this.$store.commit方法触发时，传入参数即可

addN(){
    this.$store.commit("addN", 3)
}

mapMutations

还可以通过mapMutations将所需的mutations方法映射为当前组件的methods方法

比如你有一个方法来实现减法

mutations:{
    sub(state) {
		state.count--
    }
}

那么在组件中，通过mapMutations即可将其注册到当前组件下

methods: {
    ...mapMutations(["sub"]),
},

之后在按钮绑定sub方法，即可实现减法

---

如果需要映射的方法具有参数，那么直接按照正常方法进行传递即可

mutations:{
    subN(state, num) {
		state.count -= num
    }
}

...mapMutations(["subN"])

this.subN(2)

Actions

异步任务

actions用以在vuex的业务中进行异步任务处理

如果希望异步处理数据，比如通过定时器等，那么需要通过actions，而不能直接使用mutations下的方法

要将mutations的方法在actions下执行

---

• 延迟修改数据的actions方法

actions: {
    addAsync(context) {
        setTimeout(() => {
            context.commit("add") // 依旧使用mutations下的add方法
        }, 1000) // 延迟 1秒调用add
    }
}

• 触发actions方法，要通过store的dispatch方法

add_async(){
    this.$store.dispatch("addAsync")
},

mapActions

通过mapActions 也同样可以触发actions中的方法

import { mapActions } from 'vuex';

methods:{
    ...mapActions{
        ['add_async']
    }
}

Getter

计算属性

可以加工store中的数据，但不影响原有数据，只会生成一个新的

并且，类似计算属性，当原数据发生改变时，getter对应的新值也会发生改变

new Vuex.Store({
  state: {count: 0},
  getters:{
    showCount(state){
      return state.count+10
    }
  }
})

之后在组件中使用getters属性即可

this.$store.getters.showCount

mapGetters

也可以使用mapGetters方法进行getters中属性的映射调用

注意是在组件的计算属性中定义

import { mapGetters } from 'vuex'

computed: {
    ...mapGetters(
    	['showCount']
    )
}