vuex简单理解---简易vuex构造购物车

学习笔记

vuex的基本概念

采用 集中式存储 管理模式。用来管理所有组件的状态，并以相应的规则保证状态一种可预测的方式发生变化。

什么是状态模式管理?

new Vue({
  // state 驱动应用的数据源
  data(){
    return {
      count:0
    }
  },
  //  view 以声明的方式，将 state 映射到视图 
 template: `<div> {{ count }} </div>`,
  // actions 响应在 view（视图）上的用户输入导致的状态变化。
  methods: {
    increment(){
      this.count ++ 
    }
  }
})

状态自管理应用包含以下几个部分：

• state 驱动应用的数据源
• view 以声明的方式，将 state 映射到视图
• actions 响应在 view（视图）上的用户输入导致的状态变化。

vue 单项数据流—
单项数据流简单示意图：

当我们应用 多个组件共享状态 时，单向数据流的简洁性很容易遭到破坏：

1. 多个视图依赖于同一状态。
2. 来自不同视图的行为需要变更同一状态。
   以上两个问题，对于问题一：传参的方法对于多层嵌套的组件将会非常繁琐，且对于兄弟组件的传递，无能为力。对于问题二：常采用父子组件直接引用，或者通过事件来变更，通常会导致无法维护的代码。

所以通过定义和隔离状态管理中的各种概念并通过 轻质规则维持 视图 和 状态间的独立性，代码将会变得更结构，便于维护。— 这就是Vuex基本思想。

Vuex官方

Vuex核心

1. 集中式的状态管理结构，借鉴了 Flux 和 Redux 设计思想，但是简化了概念。
2. 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

简单的事件计数实例点击查看效果

<div id="app">
  <p>{{ count }}</p>
  <p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </p>
</div>

// 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 状态管理的几个常用函数及其方法

• 首先，准备工作

1. 项目运行成功，这里可以简单使用 vue-cli 脚手架构建项目。

<!-- 简单可视化，自动构建项目命令： -->
vue ui // 终端运行

2. 项目构建完成，安装所需 Vuex

npm install vuex --save // 安装保存到本地

3. 运行代码

npm run dev    
yarn serve  // 根据自己所需使用

Vuex 使用步骤：

1. 在 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

2. 在 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 来修改。
  在组件页，可以简单给两个按钮：

<p>
  <button @click="add"> + </button>
  <button @click="reduce"> - </button>
</p>

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地址链接