什么是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.strin