Vuex在vue2中的使用

目录

1. 安装 Vuex

2. 创建 Vuex Store

3. 在 Vue 应用程序中使用 Vuex Store

4. 在组件中使用 Vuex 的使用流程

---

在 Vue 2 中，Vuex 是一个流行的状态管理模式和库。用于在 Vue.js 应用程序中管理组件之间的共享状态。

Vuex ： 专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式管理（读/写）,是组件间通信方式，适用于任意组件通信。

1. 安装 Vuex

首先，你需要使用 npm将Vuex 安装到你的项目中：

npm install vuex@3  // 在vue2中要使用vuex@3

2. 创建 Vuex Store

创建文件： src/store/index.js

应用vuex ： Vue.use(Vuex);

// 引入Vue核心库
import Vue from 'vue'; 
// 引入Vuex
import Vuex from 'vuex'; 

// 应用Vuex插件
Vue.use(Vuex); 

// 准备actions对象----响应组件中用户的动作
const actions = {}
// 准备mutations对象----修改state中的数据
const mutations = {}
// 准备state对象----保存具体的数据
const state = { 
    count : 0;
}

// 创建并暴露store 
export default new Vuex.Store({ 
actions,
mutations,
state
});

3. 在 Vue 应用程序中使用 Vuex Store

在main.js中创建vm时传入store配置项

import Vue from 'vue'; 
import App from './App.vue'; 
import store from './src/store/index.js'; 


new Vue({ 
store, 
render: h => h(App), 
}).$mount('#app');

4. 在组件中使用 Vuex 的使用流程

Vue 组件中使用 Vuex 状态

// 引入Vue核心库
import Vue from 'vue'; 
// 引入Vuex
import Vuex from 'vuex'; 

// 应用Vuex插件
Vue.use(Vuex); 

// 准备actions对象----响应组件中用户的动作
const actions = {
    // context 上下文
    jia(context,value){
    context.commit('JIA',2)    
}
}
// 准备mutations对象----修改state中的数据
const mutations = {
    // 执行
    JIA(state,value){
    state.sum + =value    
}    
}
// 准备state对象----保存具体的数据
const state = { 
    count : 0;
}

// 创建并暴露store 
export default new Vuex.Store({ 
actions,
mutations,
state
});

-----------------------------------------------------------
<script>
--------

methods：{
    increment(){
    this.$store.dispatch('jia',2)    
}
}

--------
</script>

组件中读取vuex中的数据: $store.state.sum
组件中修改vuex中的数据: $store.dispatch('action中的方法名’,数据)或 $store.commit('mutations中的方法名’,数据) 

5. mapstate 的使用

import {mapstate} from 'vuex'
export default {
    computed: {
    // 映射
    // 对象写法
    ...mapState({sum:'sum',num:'num'})
    // 数组的写法--读取store中state中的值，数据名称要一致
    ...mapState([''sum','num'])        
}
}

6. mapGetters的使用

import {mapGetters} from 'vuex'
export default {
    computed: {
    // 映射
    // 对象写法
    ...mapGetters({sum:'sum',num:'num'})
    // 数组的写法--读取store中state中的值，数据名称要一致
    ...mapGetters([''sum','num'])        
}
}