vuex模板

npm install vuex --save

import Vuex from ‘vuex’
Vue.use(Vuex)

采用抽离形式管理
state中是数据
mutations中 是函数( 给state , 可选添加参数)
actions中 可放异步函数(给context , 可选添加参数)
context.commit(‘addN’, step)
不是异步 也可在.vue中this.$store.commit(‘addN’, 3)
直接提交

getters 数据展示 修改不会牵连源state数据
数据映射成计算属性
函数映射成methods 可传递参数
都可直接调用
import { mapState, mapMutations, mapActions, mapGetters } from ‘vuex’
都可以映射 但是 数据映射Getters不同步 mapState会同步
函数都可传参且全局使用mapMutations mapActions
只是 一个是普通函数 一个是异步

1. 在.vue中 将数据product 交给 addCart 函数
   this.$store.dispatch(‘addCart’, product).then(res => {
   console.log(res)
   })

1.1 在@/store/mutation-types中 定义共用定量名
export const ADD_COUNTER = ‘add_counter’
export const ADD_TO_CART = ‘add_to_cart’

2.在@/store/actions中 addCart函数 接受委托
收取数据product在context里 然后 根据情况
context.commit(ADD_COUNTER, oldProduct)
context.commit(ADD_TO_CART, payload)
提交 数据 oldProduct 给负责ADD_COUNTER的修改人员
还是提交 数据 payload 给负责ADD_TO_CART的修改人员

import { ADD_COUNTER, ADD_TO_CART } from ‘./mutation-types’

export default {
addCart (context, payload) {
return new Promise((resolve, reject) => {
var oldProduct = context.state.cartList.find(
item => item.iid === payload.iid
)
// 找到返回item 没找到返回undefind

  //  2. 判断oldProduct  有+1  没有加商品
  if (oldProduct) {
    // oldProduct.count += 1
    // console.log('有+1')
    context.commit(ADD_COUNTER, oldProduct)
    // 找到oldProduct之后 数量 +1
    resolve('当前的商品数量+1')
  } else {
    payload.count = 1
    // console.log('没有+商品')

    // context.state.cartList.push(payload)
    context.commit(ADD_TO_CART, payload)

// commit的作用, 就是调用 某个 mutation 函数
// 可以在.vue中直接这样处理 this.$store.commit(‘addN’, 3)
// 没有找到 传过来的product 传到添加处理
resolve(‘添加了新的商品’)
}
})
}
}

Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。mutations 有 actions相同的处理数据

3.在@/store/mutations中 具有修改数据库state的权限
// 接收到修改命令 的数据 指定 修改员 名称 [ADD_COUNTER]
// 修改员[ADD_COUNTER] (state, payload)
// 修改员能拿到双方的数据
// 拿到数据后 按要求修改数据库state中的指定cartList数组

import { ADD_COUNTER, ADD_TO_CART } from ‘./mutation-types’

export default {
// mutations 唯一的目的就是为了修改state中的状态
// mutations 中的每个方法尽可能完成的事件比较单一一点
// payload新添加的商品
// 做一个跟踪 尤其是当你项目比较大的时候 比较方便调试
[ADD_COUNTER] (state, payload) {
payload.count += 1
},
[ADD_TO_CART] (state, payload) {
payload.checked = true
state.cartList.push(payload)
}
}

4.在@/store/index中 创构 vuex 状态管理
import Vue from ‘vue’
import Vuex from ‘vuex’

import mutations from ‘./mutations’
import actions from ‘./actions’
import getters from ‘./getters’

// 1. 安装插件
Vue.use(Vuex)

// 2. 创建Store对象
const state = { cartList: [] }
const store = new Vuex.Store({
state,
mutations,
actions,
getters
})

// 3. 挂载Vue实例上
export default store

5.在@/store/getters中 导出数据 注意! 导出后与数据库state中不再有联系
用于展示
export default {
cartLength (state) {
return state.cartList.length
},
cartList (state) {
return state.cartList
}
}

6. 在.vue 展示数据几种方式

引入 展示getters的无关数据
import {mapGetters} from ‘vuex’//此方法不会同步
import {mapState} from ‘vuex’//此方法会同步
映射
computed: {
…mapState([‘theme’])
}
compted:{…mapGetters([‘getters.js中export的函数名’])}
//cartLength 或 cartList
// compted:{…mapGetters([‘getters.cartLength’])}
// compted:{…mapGetters([‘getters.cartList’])}

使用
this.getters.js中export的函数名
//cartLength 或 cartList
// this.getters.cartLength 数值
// this.getters.cartList 数值

暂时使用第一种引用方式

以下内容有待考证

引入
import {mapActions} from ‘vuex’

映射
methods:{…mapActions([‘actions.js中export的函数名’])}
// methods:{…mapActions([‘addCart’])}
使用方式
@click=‘addCart’ 函数

映射的对象 可重命名写法
// …mapActions({ 自己命名用来调用的新名字 :
actions.js中export的函数名})
// …mapActions({ add : ‘addCart’ })