vuex简单理解---简易vuex构造购物车
学习笔记
vuex的基本概念
采用 集中式存储 管理模式。用来管理所有组件的状态，并以相应的规则保证状态一种可预测的方式发生变化。
什么是状态模式管理?
new Vue({
// state 驱动应用的数据源
data(){
return {
count:0
}
},
// view 以声明的方式，将 state 映射到视图
template: ` {
{ count }} `,
// actions 响应在 view（视图）上的用户输入导致的状态变化。
methods: {
increment(){
this.count ++
}
}
})
状态自管理应用包含以下几个部分：
- state 驱动应用的数据源
- view 以声明的方式，将 state 映射到视图
- actions 响应在 view（视图）上的用户输入导致的状态变化。
vue 单项数据流—
单项数据流简单示意图：
当我们应用 多个组件共享状态 时，单向数据流的简洁性很容易遭到破坏：
- 多个视图依赖于同一状态。
- 来自不同视图的行为需要变更同一状态。
以上两个问题，对于问题一：传参的方法对于多层嵌套的组件将会非常繁琐，且对于兄弟组件的传递，无能为力。对于问题二：常采用父子组件直接引用，或者通过事件来变更，通常会导致无法维护的代码。
所以通过定义和隔离状态管理中的各种概念并通过 轻质规则维持 视图 和 状态间的独立性，代码将会变得更结构，便于维护。— 这就是Vuex基本思想。
Vuex官方
Vuex核心
- 集中式的状态管理结构，借鉴了 Flux 和 Redux 设计思想，但是简化了概念。
- state — 简单来说可以理解为数据的集合。然，Vuex使得组件本地状态(component local state) 和 应用层级状态(application state) 有了一定的差异。
- component local state: 该状态表示仅仅在组件内部使用的状态，有点类似通过配置选项传入Vue组件内部的意思。
- application level state: 应用层级状态，表示同时被多个组件共享的状态层级。
Vuex的四个核心
- the state tree: Vuex使用单一的状态树，用一个对象就包含了全部的应用层级状态。可以说「唯一数据源的存在」。
- getters: 用来从 store 获取 Vue 组件数据。
- mutations: 事件处理器用来驱动状态的变化。
- actions: 可以给组件使用的函数，用来驱动事件处理器 mutations
简单的事件计数实例点击查看效果
{
{ 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')
}
}
})
vuex 状态管理的几个常用函数及其方法
- 首先，准备工作
- 项目运行成功，这里可以简单使用 vue-cli 脚手架构建项目。
vue ui // 终端运行
- 项目构建完成，安装所需 Vuex
npm install vuex --save // 安装保存到本地
- 运行代码
npm run dev
yarn serve // 根据自己所需使用
Vuex 使用步骤：
- 在 src 下创建 store.js 文件，内容如下：
// 引入必要文件
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
- 在 main.js 文件引入 store.js，内容如下：
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')
到此准备工作基本完成。下面介绍常用函数方法：
- state:
vuex 里面的数据源，需要保存的数据就保存在这里。组件页面可以通过
this.$store.state.变量名(count) 来获取数据
- getters:
getters相当于vue中的computed计算属性，getters的返回值，会根据他的依赖缓存起来，且只有当他的依赖值发生变化时，在会被重新计算，getters可以用来监听 state 中的值的变化，在配置文件 store.js 如下：
getters: {
// 类似computed
getStateCount: state => {
return state.count
}
}
在组件页面获取：
this.$store.getters.getStateCount
- mutations:
前面两种均是获取 count 值的变化，修改 store 中的 值？方法就是提交 mutations 来修改。
在组件页，可以简单给两个按钮：
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-- // 每次减一
}
}
- actions:
如上我们可以获取 state 值，官方并不介意，可以提交一个 actions ，在 actions 中 提交mutations再去修改state状态值，
这样可以在组件页指定 修改操作，比如增加多少，削减多少：
// 在 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这种长的写法，也可以使用一下方法：
- mapState、mapGetters、mapActions :
这样在页面引用 state 值，直接 可以 {
{ count }},
无需 {
{ this.$store.state.XXX }}
// 注意的是：
// 在页面引入
import { mapState, mapActions, mapGetters } from 'vuex'
computed:{
...mapState({
count: state => state.count
})
}
下面结合购物车实例：
vuex简单购物车—gitee地址链接
