采用关键步骤
先加装vuex倚赖包 npm install vuex –save引入vuex包 import Vuex from “vuex”将引入的vuex加装到工程项目里 Vue.use(vuex)import Vuex from “vuex”;
Vue.use(vuex);
4. new两个Vuex.Store第一类，建立两个store库房
const store = new Vuex.Store({
//state里头存放须要自上而下共享资源的统计数据，那时有两个count为3 state: {
count:3
}
}
5.将store第一类装载到vue示例中
const app = new Vue({
el: #app,
store,
router
})
每两个vuex应用的核心就是store，store就相当于两个容器，内部存着我们几乎须要的所有状态。两个store中包含：state，mutations，actions，getters等。
const store = new Vuex.Store({
state: {
//相当于自定义组件中的data
},
getters:{
//相当于自定义组件中的computed
},
mutations: {
//相当于自定义组件中的methods，只能做同步的操作 //对state中的统计数据进行修改
},
actions: {
//异步操作，例如ajax请求
//采用commit 触发 mutations
}
})
我们来两个个学习他们的功能
1. state
相当于自定义组件中的data，用来放置统计数据，页面中所有的统计数据都是从该第一类中进行读取。
读取统计数据的方法：
Vue.use(Vuex) 会产生两个$store第一类，常常采用this.$store.statete内的属性映射为自己组件内部的属性//建立 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: {
count () {
return this.$store.state.count
}
//方法2，使用mapstate …mapState([“count”])
}
}
2. mutations 划重点：mutations是更改state中统计数据的唯一方法
我们不被允许在组件中直接this.$store.state.count++来改变state中的count，须要通过mutations。mutations相当于自定义组件中的methods，用于对state中的统计数据进行操作，须要配合commit。虽然操作起来比较繁琐，但是可以集中监控所有统计数据的变化采用方法
方法1： this.$store.commit(“mutations中函数名称”，参数)来触发mutation函数，可以传参mapMutation采用：
const store = new Vuex.Store({
state: {
count：3
},
mutations: {
//定义add方法，传入state，即可采用state中的统计数据
add(state,n){
state.count+=n;
}
},
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.commit(“mutations中函数名称”)来触发mutation函数,并且传参3 this.$store.commit(“add”,3);
},
//方法2，采用mapMoutions,采用方法和mapState一样
…mapMoutions([“add”])
change(){
this.add(3);
},
}
}
3. Actions
在这里，我们写异步操作，因为mutations中只能处理同步操作，但是actions还是要通过触发mutation的方式间接变更数据。相当于在action中处理异步操作，处理完之后，触发mutation来修改统计数据。配合commit，dispatch采用采用方法
方法1： 通过this.$store.dispatch(“action中函数名称”)来触发异步函数,并且传参方法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. getters
不会改变state中的统计数据，会生成两个新的统计数据，起到包装作用当state中统计数据改变时，getters中统计数据也会改变。相当于自定义组件中的computed，getter 的返回值会根据它的倚赖被缓存起来，且只有当它的倚赖值发生了改变才会被重新计算。Getter 接受 state 作为其第两个参数，也可以接受其他 getter 作为第二个参数。采用方法
this.$store.getters.方法名mapGetters采用方法和前面的都差不多，举个例子：
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)
}
},
getters:{
showNum(state){
return “当前最新数量是+state.count”
}
},
}
const app = new Vue({
el: #app,
store,
components: { Counter },
//方法1,这里没有写this是因为在template中this可以省略
template: `<div class=”app”><counter> $store.getters.showNum</counter></div>`
//方法2，采用mapGetters
template: `<div class=”app”><counter> showNum</counter></div>`
})
//自定义组件
//引入mapState,mapMutations,mapGetters
import {mapState,mapMutations,mapGetters} from ‘vuex’
const Counter = {
template: `<div @click=”change”>{{ count }}</div>`,
computed: {
}
methods:{
//方法2，采用mapGetters
…mapGetters([“showNum”])
}
}
