vueX笔记整理

vuex的基本介绍

vuex的基本概念

Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式的存储管理应用所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生改变。

vuex是vue的状态管理工具，状态即数据， 状态管理就是管理vue中的数据。

注意：

• 不是所有的场景都适用于vuex，只有在必要的时候才使用vuex,如果不必要，尽量别用
• 使用了vuex之后，会附加更多的框架中的概念进来，增加了项目的复杂度

vuex的优点

• 可以用来解决组件通讯的问题
• vuex可以用来集中的管理vue项目中用到的所有数据（这并不意味着要将所有的数据都交给vuex进行管理）

为什么要使用vuex

• 在大型的项目中，组件通讯会变得很混乱，使用vuex可以统一的管理组件之间的通讯。并且可以通过开发者工具，追踪到变化。

vuex的基本创建

安装

• yarn add vuex 或者
• npm i vuex
• 引包

<script src="vue.js"></script>
<script src="vuex.js"></script>

创建

//访问Vuex的数据
<div id="app">{{$store.state.count}}</div>

<script>
// 1.使用vuex
Vue.use(Vuex)
// 2.创建Store，用于存储数据和操作数据
const store = new Vuex.Store({
  //开发模式下开启严格模式，组件不能直接修改vueX中的数据
  //注意：上线要关闭严格模式
  strict: true ,
  // 指定state属性，用于提供数据
  // 状态，类似于data，用于提供数据
  state: {
    count: 1
  }
})
const vm = new Vue({
	el: "#app"， 
	data: {},
	store
	//3.将vuex关联到vm实例上此后所有的组件都可以通过this.$store.state.XXX
	//访问到vuex的数据
})
</script>

如何在vue项目中使用vuex

vuex的基本工作如下图

在项目中使用vuex

• 新建store/index.js。类似于router/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// state用于存储数据
const state = {
	name: '张三', 
	age: 5
}
//mutations用于提供方法，mutations中的方法都是同步的，修改state的状态。 
const mutations = {
	
}
//getter:vuex中的计算属性，同vue中的计算属性相似。可供多组件使用
const getter = {}
//action: 同mutation类似，不同在于，action中可以存放任意的异步代码，
//并且提交的是一个mutation，由mutation进行更改状态。
export default new Vuex.Store({
  strict:true, 
  state, 
  mutations,
  getter,
  actions
})

• 在组件中使用vuex

//在组建中可以通过this.$store.state访问vuex的数据
//使用严格模式，我们就不能通过v-model绑定vuex中数据，这时候要修改vuex中的数据，就需要提交mutation
//commit 类似于$emit 
//提交单个数据
this.$store.commit('change',name )
//vuex中
mutations:{
   //只能接受两个参数，第一个参数固定state
   change(state , name){
   state.name = name
  }
}
//------------------提交多个数据的写法-------
this.$store.commit('change', {
   name: '李四'，
   age:15
   })
//vuex
const mutations = {
   //这里的payload就是我们传递过来的对象。
   change(state , payload){
   		state.name = payload.name
   		state.age = payload.age
   	}
}
//-----------------碰到异步的函数修改state------
//首先store分发action
this.$store.dispatch("changeAction", {
   name : '李四'
})
//action中提交一个mutation
const action = {
//context 同 store
changeAction(context){
   	setTimeout(()=>{
   		context.commit('change' , {name:'李四'})	
   	})	
   }
}

• 简写

import { mapState, mapGetters ,mapMutations } from 'vuex'
computed: {
//映射vuex的状态和计算属性和方法
   ...mapState(['list']),
   ...mapGetters(['leftCount'])，
   ...mapMutations({
     add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
   })
 },