学习笔记
采用 集中式存储 管理模式。用来管理所有组件的状态,并以相应的规则保证状态一种可预测的方式发生变化。
什么是状态模式管理?
new Vue({
// state 驱动应用的数据源
data(){
return {
count:0
}
},
// view 以声明的方式,将 state 映射到视图
template: ` {
{ count }} `,
// actions 响应在 view(视图)上的用户输入导致的状态变化。
methods: {
increment(){
this.count ++
}
}
})
状态自管理应用包含以下几个部分:
vue 单项数据流—
单项数据流简单示意图:
当我们应用 多个组件共享状态 时,单向数据流的简洁性很容易遭到破坏:
所以通过定义和隔离状态管理中的各种概念并通过 轻质规则维持 视图 和 状态间的独立性,代码将会变得更结构,便于维护。— 这就是Vuex基本思想。
Vuex官方
简单的事件计数实例点击查看效果
{
{ count }}
// js
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment: state => state.count++,
decrement: state => state.count--
}
})
new Vue({
el: '#app',
computed: {
count () {
return store.state.count
}
},
methods: {
increment () {
store.commit('increment')
},
decrement () {
store.commit('decrement')
}
}
})
vue ui // 终端运行
npm install vuex --save // 安装保存到本地
npm run dev
yarn serve // 根据自己所需使用
// 引入必要文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 创建 Vuex 实例
const store = new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
getters: {
}
})
export default store // 导出 store
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' // 这里引入
Vue.config.productionTip = false
new Vue({
router,
store, // 引入
render: h => h(App)
}).$mount('#app')
到此准备工作基本完成。下面介绍常用函数方法:
this.$store.state.变量名(count) 来获取数据
getters: {
// 类似computed
getStateCount: state => {
return state.count
}
}
在组件页面获取:
this.$store.getters.getStateCount
methods:{
add(){
this.$store.commit("add") // commit 来触发接收 store 里面的 state中的count值变化
},
reduce(){
this.$store.commit("reduce")
}
}
在配置文件 store.js 入下:
mutations:{
add: state => {
state.count = state.count++ // 每次加一
},
reduce: state => {
state.count = state.count-- // 每次减一
}
}
// 在 store.js
actions: {
// 注册 actions ,类似vue里面的 methods
add: context => { // 接收一个 与 store 实例具有相同方法的属性 context 对象
context.commit('add')
},
reduce: (context, n) => { // 这里的 第二个参数 接收组件页,指定的步数(值)
context.commit('reduce', n)
}
},
// 在组件页
methods:{
add(){
// this.$store.commit('add') // 这是通过提交 mutations 修改 state 里面的 count 值
this.$store.dispatch('add') // 这是通过提交 actions 提交 mutations 再去修改值
},
reduce(){
var n = 10
// this.$store.commit('reduce')
this.$store.dispatch('reduce', n)
}
}
如果我们在组件中不想使用this.$store.state.XXX这种长的写法,也可以使用一下方法:
这样在页面引用 state 值,直接 可以 {
{ count }},
无需 {
{ this.$store.state.XXX }}
// 注意的是:
// 在页面引入
import { mapState, mapActions, mapGetters } from 'vuex'
computed:{
...mapState({
count: state => state.count
})
}
下面结合购物车实例:
vuex简单购物车—gitee地址链接