Vuex的核心是store(仓库)。store基本上是一个容器,包含应用中绝大部分state, mutation, action, getters等。

const store = new Vuex.Store({
state: {
//相当于自定义组件中的data
},
getters:{
//相当于自定义组件中的computed
},
mutations: {
//相当于自定义组件中的methods,只能做同步的操作
//对state中的数据进行修改
},
actions: {
//异步操作,例如ajax请求
//使用commit 触发 mutations
}
})

1. state

相当于定义组件中的data,用来存放数据。页面中所有的数据都是从该对象中读取。

state读取数据的方法:

1)  Vue.use(Vuex) 会产生一个$store对象,通常使用this.$store.state.数据变量名

2) 使用mapState获取vuex中state里面的值。 第一步,import {mapState} from ‘vuex’。第二步,将其扩展放在computed计算属性里来使用,相当于把state内的属性映射为自己组件内部的属性。

//创建 vuex 实例
const store = new Vuex.Store({
state: {
count:3
}
}
//创建 vue 实例,把store挂载到vue实例上
const app = new Vue({
el: '#app',
store,
components: { Counter },
template: `<div class="app"><counter></counter></div>`
})
//自定义组件
//引入mapstate
import {mapState} from ‘vuex’
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
//方法1,通过this.$store.state.count获取state中count的值
count () {
return this.$store.state.count
}
//方法2,使用mapstate
...mapState(["count"])
}
}

2. mutations

mutation 是更改state中数据的唯一方法。

1) mutations 相当于自定义组件中的methods,配合commit,对state中的数据进行操作。

2) "$store.state.变量名" 不能直接修改变量值。

3) mutation可以监控所有数据的变化。

mutation 使用方法

1) 方法1:this.$store.commit("mutation中函数名称", 参数),触发mutation函数。

2) 方法2:mapMutation

src/store/index.js

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

Vue.use(Vuex)

const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
},
add(state, n) {
state.count += n;
}
}
})

export default store

//computed: {}

 

3. action

1) mutation只能处理同步操作,action触发mutation来变更数据。

2) action可处理异步操作,需配合dispatch使用。

action使用方法

1) 方法1:this.$store.dispatch("action中函数名称")来触发异步函数,并且传参。

2) 方法2:使用mapActions

const store = new Vuex.Store({
state: {
count:3
},
mutations: {
//定义add方法,传入state,即可使用state中的数据
add(state,n){
state.count+=n;
}
},
actions:{
//自定义一个异步操作函数addAsync,传入context
addAsync(context,n){
//以定时器为例,实现点击按钮之后一秒再count+1,通过commit调用mutation中的add方法
setTimeout(()=>{
context.commit("add",n)
},1000)
}
},
}
const app = new Vue({
el: '#app',
store,
components: { Counter },
template: `<div class="app"><counter></counter></div>`
})
//自定义组件
//引入mapState,mapMutations
import {mapState,mapMutations} from ‘vuex’
const Counter = {
template: `<div @click="change">{{ count }}</div>`,
computed: {
count () {
return this.$store.state.count
}
...mapState(["count"])
}
methods:{
change(){
//方法1,通过this.$store.dispatch("action中函数名称")来触发异步函数,并且传参
this.$store.dispatch("addAsync",3);
},
//方法2,使用mapActions,使用方法和mapmutations一样
...mapActions(["addAsync"])
change(){
this.addAsync(3);
},
}
}

4. getter

1) 不改变state中的数据,会生成一个新的数据,起到包装的作用。

2) 当state中数据改变时,getters中数据也会改变。相当于自定义组件中的computed,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

3) Getter 接受 state 作为其第一个参数,也可以接受其他 getter 作为第二个参数。

getter使用方法

1) 方法1:this.$store.getters.方法名

2) 方法2:mapGetters

Vuex使用步骤

  1. 先安装vuex依赖包 npm install vuex --save
  2. 导入vuex包 import Vuex from “vuex”
  3. 将导入的vuex安装到项目里 Vue.use(vuex)
  4. new一个Vuex.Store对象,创建store仓库
  5. 将store对象挂载到vue实例中

Vue.use(vuex)

  • 判断vue是否已经注册过vuex插件;
  • 将​​vuexInit​​函数混入到vue的beforeCreate生命周期中;
  • 实例化vue时,会在vue每个实例上添加$store属性,并将vuex的实例绑定到$store属性上。

# Demo

src/store/index.js

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

Vue.use(Vuex)

const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
}
})

export default store

src/main.js

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

Vue.prototype.$eventHub = Vue.prototype.$eventHub || new Vue()
Vue.prototype.$store = store
App.mpType = 'app'

const app = new Vue({
...App,

created: function() {
console.log(store.state.count);

store.commit('increment');
console.log(store.state.count);
}
})
app.$mount()

src/App.vue

<script>
export default {
onLaunch: function() {
console.log("test onLaunch 01..............");
}
}
</script>

控制台打印结果:

0
1 // after store.commit
test onLaunch 01..............

通过提交 mutation 的方式,而非直接改变 ​​store.state.count​​,是因为我们想要更明确地追踪到状态的变化。 在阅读代码的时候能更容易地解读应用内部的状态改变。

由于 store 中的状态是响应式的,在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation。

 

重点参考:​​https://www.jianshu.com/p/0c52ba745d48​