Vuex补充篇

开门见山

本篇文章主要是对Vuex的用法进行补充，希望可以帮助到大家，其中包括更优雅调用mutation
state，getters，严格模式，以及命名空间

state

vuex中的state存储数据

export default new Vuex.Store({
    state: {
        count: 20,
        msg: "this is vueX State data"
    },
    mutations: {},
    actions: {},
    modules: {},
})

vue项目中使用

方法1：

<h2>count:{{ $store.state.count }}</h2>

<p>msg:{{ $store.state.msg }}</p>

方法2：
//引用辅助函数
import { mapState } from 'vuex'

在computed 使用

computed :{
	//需要接收一个数组作为参数，数组里面的key就是state里面的key
	//mapState会返回一个对象，包含两个计算属性对应的方法，这里的两个是数组里面的数量
	//根据情况而定，计算属性的表现形式如下
	//count: state => state.count
	//msg:state => state.msg
	//然后需要使用扩展运算符,用于展开返回对象的成员给computed
    ...mapState( ['count','msg']),
}

vue项目中调用

<h2>count:{{ count }}</h2>

<p>msg:{{ msg }}</p>

//结果是一样的

方法3:：

方法2在使用过程中有一个问题，如果当前组件中有重名的时候怎么办呢、

其实这个问题也有解决的办法，mapState中不仅能传递数组而且还能传递对象，

如果传递对象的话可以修改映射的计算属性的名字，如下所示

computed :{
	//key就是自定义的value就是state中的key
    ...mapState( { num: 'count': message:"msg" }),
}
   
vue项目中使用

<h2>count:{{ num }}</h2>

<p>msg:{{ message }}</p>

这三种方法都是一样的

getter

vuex中的getter类似组件中的计算属性,主要是对state中的数据进行简单的处理可以使用getters
reverseMsg
getters :{

	reverseMsg(state){
	//接收一个形参就是state中的数据，
	//处理过后返回处理的result
		return state.msg.split("").reverse().join("")
	}
vue组件中调用总共有3中方法

方式1:
<h2>count:{{ $store.getters.reverseMsg }}</h2>

方式2:
import { mapState ,mapGetters} from 'vuex'
computed :{
	//key就是自定义的value就是state中的key
    ...mapState( { num: 'count': message:"msg" }),
    ...mapGetters(['reverseMsg '])
}
组件中使用
<h2>count:{{ reverseMsg }}</h2>

方法3:
用于处理重名情况
import { mapState ,mapGetters} from 'vuex'

computed :{
	//key就是自定义的value就是state中的key
    ...mapState( { num: 'count': message:"msg" }),
    ...mapGetters({
    	revserse :'reverseMsg '
    })
}
组件中使用
<h2>count:{{ revserse }}</h2>

mutation

在vuex状态的修改必须提交mutation，mutation必须是同步执行的，
这样可以保证能够在mutation可以收集到所有的状态修改

//代码如下

mutation:{
//定义修改数据的行为
	increate(state,payload){
		state.count += payload
	}
//组件中调用 

方法1:
//方法1:第一个形参是mutation里面的函数 第二个参数的需要增加的大小
//与increate一一对应
<button @click = "$store.commit('increate',20)"></button> 
//点击按钮state里面的count 增加 

方法2:
//使用辅助函数和mapGetter / mapState一样 
import { mapMutation } form "vuex"

//mutation里面的方法不再是计算属性，所以需要放在methods中

methonds : { 
	...mapNutations(["increate"])
}
//项目中使用 这样只需要传递一个参数即可
<button @click = "increate(20)"></button> 

方法3:
//方法映射 / 也可以说是防止重名 就是...mapMutation可以传递数组进去

methonds : { 
	...mapNutations({add:"increate"})
}
//项目中使用 这样只需要传递一个参数即可
<button @click = "increate(20)"></button> 

action

//action主要方便异步调用的，例如把请求到的数据保存到state里面
定义action方法

const action = {
    add(context, payload) {
    //这里使用setTimeout模拟异步操作
        setTimeout(() => {
            context.commit("increate", 20)
        }, 2000)
    }
}
组件中调用 总共3中方法

方法1:
<button @click = "$store.dispatch('increate',20)"></button> 

方法2:
//使用辅助函数mapActions 
import { mapActions }  form "vuex" ;
//在methods中调用

methods :{
	...mapActions(['add']) 
}

//项目中使用 这样只需要传递一个参数即可
<button @click = "add(20)"></button> 

方法3:
//方法映射 / 也可以说是防止重名 就是...mapMutation可以传递数组进去

methonds : { 
	...mapNutations({addNumber:"add"})
}

//项目中使用 这样只需要传递一个参数即可
<button @click = "addNumber(20)"></button> 

moodule

模块可以把单一状态数树拆分为多个模块，方便调用，每一个模块都有自己的
state / getters / mutation / action 下面是演示代码

// index.js 
import Vue from 'vue'
import Vuex from 'vuex'
//引入模块文件
import products from './modules/products'
import cart from './modules/cart'

Vue.use(Vuex)

export default new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  state: {
    count: 0,
    msg: 'Hello Vuex'
  },
  getters: {
    reverseMsg (state) {
      return state.msg.split('').reverse().join('')
    }
  },
  mutations: {
    increate (state, payload) {
      state.count += payload
    }
  },
  actions: {
    increateAsync (context, payload) {
      setTimeout(() => {
        context.commit('increate', payload)
      }, 2000)
    }
  },
  modules: {
    products,
    cart
  }
})

//cart.js
const state = {}
const getters = {}
const mutations = {}
const actions = {}

export default {
  namespaced: true,//开启命名空间
  state,
  getters,
  mutations,
  actions
}

//product.jjhjs
const state = {
  products: [
    { id: 1, title: 'iPhone 11', price: 8000 },
    { id: 2, title: 'iPhone 12', price: 10000 }
  ]
}
const getters = {}
const mutations = {
  setProducts (state, payload) {
    state.products = payload
  }
}
const actions = {}

export default {
  namespaced: true,//开启命名空间
  state,
  getters,
  mutations,
  actions
}

//组件中使用
products: {{ products }} <br>
<button @click="setProducts([])">Mutation</button>

computed: {
 //第一个是模块的名字，第二个模块中的key
    ...mapState('products', ['products'])
  },
methods: {
 //第一个是模块的名字，第二个模块中的key
    ...mapMutations('products', ['setProducts'])
  }

严格模式

在vuex中年所有状态的改变必须通过提交mutation，但这里仅仅是一个约定，

在实际开发过程你可以随时改变state中的值，从语法层面来时是没有问题的

但是这样破坏了vuex的约定，如果在开发过程中直接修改了state那么devTools

将无法跟踪state的改变，当我们开启了严格模式之后，直接修改state里面的数据

将会抛出错误 演示如下

export default new Vuex.Store({
  strict: true,//开启严格模式在开发过程直接修改state里面的数据
  //state里面的值会改变，但是控制台将会抛出错误
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

严格模式说明

不要在生产环境开启严格模式，因为严格模式会深度检查状态树，来检查不和规则的改变

这样的话影响性能、开发模式启用严格模式，生产环境关闭严格模式

代码演示如下

让webpack处理这个问题 开发的时候strict值为false 打包的时候strict值为true
strict: process.env.NODE_ENV !== 'production',

篇幅较长，欢迎观看，如有不足，敬请指教