Vuex基础语法

Vuex

vuex官网

vuex的工作原理图

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex的工作原理是，它将应用的状态存储在一个单一的状态树中，并且提供了一组可以改变状态树的方法，这些方法只能通过提交mutation来调用。

2.vuex的环境搭建

1.安装vuex3版本

npm i vuex@3

2.准备store环境

//改文件用于创建Vuex的核心store//映入vuex
import Vuex from 'vuex'//引入vux
import Vue  from 'vue'Vue.use(Vuex)// 准备actions-用于响应组件动作
const actions={}//准备mutations-用于曹组数据const mutations={}//准备state
const state={}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,
})

3.在main.js引入

// 引入vuex
import Vuex from 'vuex'//映入store
import store from './store/index'
//使用vuex
Vue.use(Vuex)
new Vue({el:"#app",store,render: h => h(App),// 安装全局事件总线beforeCreate(){Vue.prototype.$bus=this // this为vm,安装全局事件总线}
}) //配置容器id

3.vuex的使用

注意在VC和vm中都有了store，store本身都有很多的方法可以直接在VC和vm中调用。

add(){//在VC调用storethis.$store.dispatch('jia',this.n)},

在soter中

1.actons

const actions={jia(context,value){console.log('actons',context)context.commit('JIA',value)}
}

2. mutations

const mutations={JIA(state,value){console.log('mutations',state)state.sum+=value}
}

注意在VC的store中保存着state的值。

3.getters

Vuex中的getters用于从store中获取状态，它的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算,
会对state中的数据进行加工

//准备state-用于将state中的数据加工
const getters={bigSum(state){return state.sum*10}
}

在组件中使用getters

$store.getters.bigSum

4.vuex中的map映射属性

4.1 mapState和mapGetters

VuexmapState是Vuex的一个实用程序函数，用于将Vuex存储中的状态映射到组件的计算属性中。它接受一个字符串数组或对象，其中包含要映射的状态名称，并返回一个对象，其中包含映射的状态。
1.其中mapState将state中的数据映射到对应的方法上
2.其中mapGetters将getters中的数据映射到对应的方法上

1.映入mapState

import { mapState } from 'vuex';
import { mapGetters } from 'vuex';

2.在计算属性中

computed:{// 对象结构//借助mapstate生成计算属性，从state中读取数据...mapState(['sum','school']),// 借助mapgetters生成计算属性，从getters中读取数据...mapGetters(['bigSum'])}

4.2 mapMutations和mapActions

mapMutations作用是将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store），它将组件中的 methods 映射为 store.commit 的调用，从而可以直接触发状态变更。

  methods:{// 借助mapMUtations生成对应的方法，在方法中会调用commit去联系mutation（对象的写法）...mapMutations({add:'JIA',decde:'JIAN'}),}

mapActions是Vuex中的一个方法，它可以将store中的actions映射到组件的methods中，从而使组件可以调用store中的actions。

5.vuex多组件通信

vuex多组件通信是通过获取state中的值使得数据共享，由于store中的state都可可以在vc中通过this.$store.state拿取到对应的值。

1.通过计算属性获得

computed:{sum(){return this.$store.state.sum}},

2.通过mapState获得

   computed:{...mapState(['sum'])},

6.vuex模块化和命名空间

Vuex模块化是指将Vuex的store分割成模块，每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割，使得状态管理更加清晰明了

Vuex 命名空间是一种机制，可以让你在一个 store 中定义多个模块，从而使得代码更加组织和可维护。它使用一个 namespace 来标识每个模块，以便在不同模块之间进行区分

6.1模块化

在模块化的中必须加上 namespaced:true,

在sotre中

const countAbout={// 开启命名空间namespaced:true,actions:{},mutations:{JIA(state,value){console.log('mutations',state)state.sum+=value},JIAN(state,value){console.log('mutations',state)state.sum-=value},},state:{sum:0,school:'下滑',},getters:{bigSum(state){return state.sum*10}}
}//创建并暴露store
export default new Vuex.Store({modules:{countAbout,}
})

在页面，可以直接通过差值表达式渲染。
1.获取state中的值

computed: {// 对象结构//借助mapstate生成计算属性，从state中读取数据// ...mapState(['sum','school','personList']),...mapState("countAbout", ["sum", "school"]),...mapState("personAbout", ["personList"]),// 借助mapgetters生成计算属性，从getters中读取数据// ...mapGetters(['bigSum'])},

2.获mucation中的值

methods: {// 借助mapMUtations生成对应的方法，在方法中会调用commit去联系mutation（对象的写法）...mapMutations("countAbout", { add: "JIA", decde: "JIAN" })；},