1.Vuex是一个状态管理的容器
自己写Vuex管理
const OBJ = {
name:"foo"
}
Vue.prototype.OBJ = OBJ
const app = new Vue({
el:'#app'
})
问：这样写和Vuex有什么区别呢？
答：Vuex中的状态管理是加入了响应式的，而我们这种手写是没加入响应的
2.Vuex的单页面状态管理
三种属性：state，view，actions
三者关系：state是单页面的状态，可以通过view进行页面展示（ {{data中的数据}} ），在view展示的状态可以通过actions来控制（@click="handleClick"）,actions可以控制状态，并且可以改变（state（handleClick（）{ 数据++ }），形成一个循环关系
3.Vuex基本使用
// ./store/index.js
import Vuex from "vuex"
import Vue from "vue"
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
state:0
},
mutations:{
},
getters:{
},
actions:{
},
modules:{
}
})
export default store
// ./main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
new Vue({
render: h => h(App),
router,
store
}).$mount('#app')
// ./components/vuex.vue
<h2>{{$store.state.state}}</h2>
4.Vuex修改的基本操作
5.Vuex对state状态修改
从上面的图可以知道，Vue官方是不推荐在某一个组件里面直接对state状态进行修改的，Vue推荐的是至少通过mutations进行state状态的修改，如果存在一些异步的操作，这些异步操作都是放在actions里面的。actions一般是处理异步代码的。
mutations:{
// 默认带state的参数
// state是上面 ./store/index.js 的state，里面有个state属性
increament(state){
state.state++
}
decreament(state){
state.state--
}
},
//html
<h2 @click="addHandleClick"></h2>
<h2 @click="subHandleClick"></h2>
methods:{
addHandleClick(){
//对mutations的方法进行提交来改变state状态
this.$store.commit("increament")
},
subHandleClick(){
this.$store.commit("decreament")
}
}
6.Vuex中的getters使用（类Vue中的计算属性）
//一个参数
getters:{
getState(state){
return state.state * 2
}
},
//两个参数
getters:{
//第一个参数的state:{},第二个参数就是getters:{}
getStateLenth(state，getters){
return getters.getState.length
}
},
//如果要使用参数，那就得传一个函数
getters:{
getStateAdd(state){
return function (age) {
retunrn state.state.filter(item => item > age)
}
}
},
//使用,返回 item>9 的项
<h2>{{this.$store.getters.getStateAdd(9)}}</h2>
//html
<h2>{{this.$store.getters.getState}}</h2>
7.Vuex的mutations传参
mutations:{
addCouter(state,num){
state.state += num
},
addStudy(state,stu){
state.study.push(stu)
}
},
//+5
<h2 @click="addCouter(5)"></h2>
//+10
<h2 @click="addCouter(10)"></h2>
//传对象
<h2 @click="addStudy"></h2>
methods:{
addCouter(num){
// num被成为payload-->负载
this.$store.commit("increament",num)
},
addStudy(){
const stu = { name:"xiaoming",age:18 }
this.$store.commit("addStudy",stu)
}
}
8.Vuex的mutations提交风格
methods:{
addCouter(num){
this.$store.commit({
type:"increament"
num:num
})
},
addStudy(){
const stu = { name:"xiaoming",age:18 }
this.$store.commit({
type:"increament"
stu
})
}
}
mutations:{
addCouter(state,payload){
console.log(payload) //对象，{ type:"increament"，payload：5 }
}
},
