什么是Vuex?
官方说明：
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
个人理解：
vuex就是一个状态管理的工具，如果我们没有用vuex，那么每个组件之间的传值就只能通过存储的方式来存储。这样一旦项目大了过后就不利于数据状态的管理。所以如果我们用到了vuex那么就会方便管理很多。
引入Vuex
1.新建一个目录store，在目录下新建一个index.js文件
2.在index.js中添加以下代码：
import Vue from "vue"
import Vuex from "vuex"
//引入cart的vuex模块
import cart from "@/store/modules/cart.js"
Vue.use(Vuex)
export default new Vuex.Store({
//当做data
state:{
},
//相当于计算属性
getters:{
},
//同步一些方法
mutations:{
},
//存放异步的方法
actions:{
}
})
这里面的state就相当于data，getters相当于computed，mutations存放同步的方法，actions存放异步的方法。
3.在main.js中引入vuex
import Vue from 'vue'
import App from './App'
import store from './store' //引入vuex
Vue.prototype.$store = store //引入vuex
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
store, //引入vuex
...App
})
app.$mount()
上面备注引入vuex的代码就是需要添加的。
这样vuex就引入成功了。
state的多种用法
我们通常会把全局或者常用变量放在state中。我们假设一个购物的场景，当我们添加商品到购物车的时候，这时候数据就会在购物车的页面中使用，所以我们就可以将数据存放在state中。如果其它页面想要拿取，直接调用即可。
我们在state中创建一个list数组：
然后创建一个购物车的Vue页面
第一种方法
在onLoad方法中写一下代码：
console.log(JSON.stringify(this.$store.state.list));
结果：
第二种用法：
在Vue页面中引入：mapState
import {mapState} from "vuex"
在computed中添加以下代码：
...mapState({
list:"list",
}),
onload中：
console.log(JSON.stringify(this.list));
测试结果：
第三种方法：
在computed中添加以下代码：
newList(state) { // 可以进行过滤操作
return state.list.filter(v=> v.status)
}
onload中：
console.log(JSON.stringify(this.newList));
测试结果：
对商品进行过滤，只输出true的结果。
Getters的多种用法
第一种用法：
在getters中添加以下代码：
//拿到状态为true的商品
activeList:(state)=>{
//返回状态为true的数据
return state.list.filter(v=>v.status)
},
onload中：
console.log(this.$store.getters.activeList);
结果：
返回status为true的商品。
第二种用法：
Vue页面引入mapGetters
import {mapState,mapGetters} from "vuex"
在getters中添加以下代码：
//拿到状态为true的商品
activeList:(state)=>{
//返回状态为true的数据
return state.list.filter(v=>v.status)
},
在computed中添加以下代码：
...mapGetters([
'activeList',
])
onload中：
console.log(JSON.stringify(this.activeList));
结果：
返回status为true的商品。
第三种用法：
将…mapGetters([])改为…mapGetters({})，这样可以将方法重命名。
在computed中添加以下代码：
...mapGetters({
//重命名
active:'activeList',
})
onload中：
console.log(JSON.stringify(this.active));
结果：
返回status为true的商品。
Mutations的多种
这个存放许多的同步方法。
第一种方法：
在mutations中添加以下代码：
inc(state,n) {
state.number += n;
console.log(3333);
}
onload中：
this.$store.commit('inc');
结果：
输出了3333。
第二种用法：
在Vue的页面中引入：
import {mapState,mapGetters,mapMutations} from "vuex"
在methods中添加以下代码：
// 引入mapMutations
...mapMutations([
'inc'
]),
onload中：
this.inc()
结果：
输出了3333。
第三种方法
和getters一样
在state中添加一个number：
修改mutations代码：
//同步一些方法
mutations:{
inc(state,n) {
state.number += n;
console.log(state.number);
}
},
在methods中添加以下代码：
...mapMutations({
Inc2:'inc'
}),
onload中：
this.Inc2(10)
结果：
2+10=12，说明没有问题。
Action方法的用法
action里面存放都是异步的方法
第一种用法：
在action中添加以下代码：
AsyncInc({commit,state},n) {
// 定时执行
setInterval(()=>{
commit('inc',20)
console.log(state.number);
},2000)
}
onload中：
this.$store.dispatch('AsyncInc')
输出结果：
没2秒都会调用inc方法自动加20。
第二种方法：
在action中添加以下代码：
AsyncInc({commit,state},n) {
// 定时执行
setInterval(()=>{
commit('inc',n)
console.log(state.number);
},2000)
}
在methods中添加以下代码：
...mapActions([
'AsyncInc'
])
onload中：
this.AsyncInc(100)
结果：
没2秒自动加100，说明没有问题。
Vuex的模块化实现
当我们的项目很大的时候，就会产生很多的数据和方法，如果我们都放在index.js中那么会很不方便管理，所以我们就将vuex进行模块化。
我们在store中建一个modules文件，并且里面新建一个cart.js文件，我们就可以将购物车的vuex数据写在里面。
然后再index.js中引入cart模块：
import Vue from "vue"
import Vuex from "vuex"
import cart from "@/store/modules/cart.js //引入cart的vuex模块
Vue.use(Vuex)
export default new Vuex.Store({
modules:{
cart:cart,//引入模块
}
})
在state中需要在state的后面加上模块的名字，列如：
this.$store.state.cart.list
这样就会知道是cart模块的list。
然后需要注意的地方就是：
1.每个模块中state的名字不能重复
2.每个模块中getter只执行一个
3.mutations和actions都执行
感谢大家的观看！如有不足请评论指出，谢谢！