vuex概述
# 优点：
js 原生的数据对象写法, 比起 localStorage 不需要做转换, 使用方便
属于 vue 生态一环, 能够触发响应式的渲染页面更新 (localStorage 就不会)
限定了一种可预测的方式改变数据, 避免大项目中, 数据不小心的污染
# 缺点：
刷新浏览器，vuex中的state会重新变为初始状态
解决方案-插件 vuex-persistedstate
//组件之间数据共享方式
# 1.安装vuex
npm i vuex -S
# 2.导入vuex 包
import Vuex from 'vuex'
VUe.use(Vuex)
# 3.创建Store 对象
const store = new Vuex.Store({
//state 中存放就是全局共享数据
state: { count: 0 }
})
# 4.将store 对象挂载到vue 实例中
new Vue({
el: '#app',
router,
store
})
组件访问State 中的数据的第一种方式：
this.$store.state.全局数据名称
store.js
export default new Vuex.Store({
//state公共状态仓库
state: { n: 0 },
//操作state中数据的同步代码
mutations: {
addN(state, x) {
this.state.n += x
}，
list(e, x) {} //接收action中触发的方法
},
//操作actions中的数据的异步代码
actions: {
reduceN(context, x) {
setTimeout(() => {
this.state.n -= x
context.commit('list', 3) //action中通过.commit方法触发一个list方法，并且携带一个参数
}, 1000)
}
},
modules: {}
})
app.vue
methods: {
add() {
this.$store.commit('addN', 3) //触发上面mutations中的 addN函数并添加一个参数3、选填
},
reduce() {
this.$store.dispatch('reduceN', 3) //触发上面actions中的 reduceN函数并添加一个参数3，选填
}
}
