vuex——状态管理插件（转）

我在网上看到一篇很好关于vuex使用的文章（转）所以本知识要点按照那篇文章操作。我们在使用vuex插件的时候，一定要使用npm install --save vuex，不然程序会报错，并且提示你请安装。

目录

☪ ？数组状态管理

► vuex状态管理〖实例〗

◆ ？如何安装vuex

◆ ？如何在项目中使用vuex

​☪  Getters

◆ ㊫ Demo实战

⒈/src/store/index.js

⒉/src/componet/HelloWorld.vue

⒊效果

​ ☪ Actions & Mutations

◆ ？数据我们在页面是获取到了，但是如果我们需要修改count值怎么办

◆  ㊫ Demo实战

先正常输出vuex中的count值

☪ ​ 需要指定加减的数值

☪ ​ mapState,mapGetters,mapActions

---

？数组状态管理

适合比较复杂的项目

1. What is vuex？
2. 为什么要使用状态管理？

如购物车信息，在淘宝的首页和个人中心等页面，同步显示和更新……vuex插件当数据发生变化，无论是计算还是watch都能够很好的实现；

统一的数据中心Store去维护各种状态数据，每一个组件在更新的时候，就通知数据中心Shared State，数据中心再去触发调用的对应组件。

► vuex状态管理〖实例〗

？如何安装vuex

npm install --save vuex（进入使用my-vuex执行语句）

？如何在项目中使用vuex

1. 在src目录下创建store文件夹，在store文件夹下面创建index.js，实例化store数据中心（const store = new Vuex.Store({})）

   /* index.js */
   
   import Vue from 'vue'
   import Vuex from 'vuex'
   
   // 使用Vuex
   Vue.use(Vuex)
   
   // 创建Vuex实例
   const store = new Vuex.Store({
   	state:{
   		count:1,
   	},
   })
   
   export default store

    

2. 安装vuex插件（npm install --save vuex）
3. mian.js入口处引入store，并且创建实例（import store from './store' & ,store）

   // main.js
   import Vue from 'vue'
   import App from './App'
   import router from './router'
   import store from './store'
   Vue.config.productionTip = false
   
   /* eslint-disable no-new */
   new Vue({
     el: '#app',
     store,
     router,
     components: { App },
     template: ''
   })
   

    

4. 使用state属性在HelloWorld.vue中（{{this.$store.state.count}}）

    

5. 如果在浏览器中出现下方结果，表示初步成功

   

 Getters

Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，payload作为第二个参数（额外的参数）

㊫ Demo实战

⒈/src/store/index.js

/* index.js */
import Vue from 'vue'
import Vuex from 'vuex'

// 使用Vuex
Vue.use(Vuex)

// 创建Vuex实例
const store = new Vuex.Store({
	state:{
		count:1,
	},
	getters:{
		getStatusCount(state){
			return state.count+1;
		}
	}
})

export default store

⒉/src/componet/HelloWorld.vue

⒊效果

 Actions & Mutations

我们看到，当点击三次后值从2变成了-1；页面上的值是改变了；我们达到了修改store中状态值的目的；

但是，官方并不介意我们这样直接去修改store里面的值，而是让我们去提交一个actions，在actions中提交mutation再去修改状态值，接下来我们修改index.js文件，先定义actions提交mutation的函数：

---

？数据我们在页面是获取到了，但是如果我们需要修改count值怎么办

如果需要修改store中的值唯一的方法就是提交mutation来修改，我们现在Hello World.vue文件中添加两个按钮，一个加1，一个减1；

这里我们点击按钮调用addFunc（执行加的方法）和reductionFunc（执行减法的方法），然后在里面直接提交mutations中的方法修改值：

㊫ Demo实战

• 先正常输出vuex中的count值

1. /src/store/index.js

   /* index.js */
   
   import Vue from 'vue'
   import Vuex from 'vuex'
   
   // 使用Vuex
   Vue.use(Vuex)
   
   // 创建Vuex实例
   const store = new Vuex.Store({
   	state: {
   		count: 1,
   	},
   	getters: {
   		getStatusCount(state) {
   			return state.count + 1;
   		}
   	},
   	mutations: {
   		vxadd(state) {
   			state.count = state.count + 1
   		},
   		vxreduction(state) {
   			state.count = state.count + 1
   		}
   	},
   	actions: { // 注册action,类似vue里的methods
   		addFunc(context) {
   			// this.$store.commit('vxadd');
   			context.commit('vxadd')
   		},
   		reductionFunc(context) {
   			// this.$store.commit('vxreduction');
   			context.commit('vxreduction')
   		}
   	}
   })
   
   export default store
   

    

2. 发现getValue没有问题则复制this.$store提交到vuex.commit（方法）中，由原先的Mutations变成Action再提交到Mutations

    

3. 终点两者效果是等同的

 需要指定加减的数值

那么我们直接传入dispatch中的第二个参数，然后在actions中的对应函数中接受参数在传递给mutations中的函数进行计算：

1. 1 /src/componet/HelloWorld.vue

1. 2 效果

1. 3 效果

 mapState,mapGetters,mapActions

如果我们不喜欢这种在页面上使用“this.$stroe.state.count”和“this.$store.dispatch('funName')”这种很长的写法，那么我们可以使用mapState、mapGetters、mapActions就不会这么麻烦了；

我们修改Hello World.vue文件如下：

1. 1 HelloWorld.vue （...mapState-》mapStateCount: state => state.count）

1. 2 pic

1. 3 效果图