任何回调函数中进行的状态改变都是无法追踪的
Vuex
状态管理（重点） vuex 需要独立安装,用来解决数据存储和维护的问题
使用：
1.npm i vuex -S
2.store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
let store=new Vuex.Store({
state:{
item:[1,2,3]
},
getters:{},
mutations:{},
actions:{}
})
export default store;
3.main.js
import store from './store/store.js';
new Vue({
store,
router,
render: h => h(App),
}).$mount('#app')
属性：
- state 用来存储状态的容器
state:{
item:[1,2,3]
}
- mutations 用来存储改变state的方法的容器
mutations:{
setNum(state,payload){
state.item.push(payload)
}
}
- actions 用来存储异步代码和业务逻辑代码，组件页用户触发的是这个函数
actions:{
setNum(context,payload){
context.commit("setNum",payload);
}
}
- getters 类似计算属性
getters:{
show(state){
return state.item;
}
}
- modules 状态特别多时，可以用modules将状态进行分类
this.$store.state.g.goods //g模块下的goods
store.js
import .......
import cart from './cart.js'
const store = new Vuex.Store(
{
modules: {
adress,
cart
}
})
export default store
cart.js
const cart={
namespaced:true, //使用命名空间
state={},
getters:{},
...
}
export...
组件触发：
methods:{
add(){
this.$store.dispatch("a/setNum",parseInt(Math.random()*3)) //a模块下的setNum
this.$store.dispatch("setNum",parseInt(Math.random()*3)) //所有模块的setNum
}
}
订阅事件：
store.subscribe((mutation, state)=>{
// 每次执行完 mutation 后，该订阅函数会被自动触发
})
区分 actions 和 mutations 并不是为了解决竞态问题，而是为了能用 devtools 追踪状态变化
mutation 必须是同步，意义在于这样每一个 mutation 执行完成后都可以对应到一个新的状态（和 reducer 一样）.
亲测： 如果在mutation中做了异步操作，在dev-tools中会立即打印一个snapshot，而此时异步操作还没有执行完，此时的snapshot的信息是错误的。
而在action中做异步操作dev-tools会等等异步操作执行完才去打印mutation的一个snapshot,这样便于我们回查time-travel,查看在某个mutation里的变化。
辅助函数的使用：
import {mapState,mapMutations,mapActions,mapGetters} from "vuex"
state的辅助函数需要映射到计算属性中computed，映射的名称一定要相同，然后就可以通过this访问到state
computed:{
// ...mapState(["item"]) //name和vuex中的state保持一至。
...mapState({ //用了模块化后
item:(state,getters)=>{
return state.cang.item;
}
})
},
methods：{
click(){
console.log(this.name)//访问到vuex的name
}
}
mutation的辅助函数mapMutations把mutations里面的方法映射到methods中
methods:{
// ...mapMutations(["show"])
...mapGetters({ //用了命名空间后
"show":"cang/show"
}),
click(){
this.show()
},
}
mapAcions：把actions里面的方法映射到methods中
methods:{
// ...mapActions(['setNum'])
...mapActions({ //用了命名空间后
setNum:"cang/setNum"
})
}
mapGetters:把getters属性映射到computed身上