多个计数器在Vuex中的状态

安装

安装vue-cli npm i -g vue-cli

生成目录 vue init webpack

启动开发环境 npm run dev

启动命令

npm install -g vue-cli

vue init webpack project-vue

cd project-vue

npm run dev

vue-cli 单文件组件

使用组件三部曲：引入组件、注册组件、使用组件

引入组件：import Hello from ‘./components/hello’

注册组件： components: { Hello:Hello }

使用组件：

Vuex

1.集中式存储管理状态
2.一种可预测的方式发生变化

状态组件内部转态: 仅在一个组件内使用的状态(data字段)
应用级别状态: 多个组件公用的状态

什么情况下使用Vuex
1.多个视图依赖于同一状态
2.来自不同视图的行为需要变更同一状态

安装Vuex
npm i vuex –save

在src文件夹下面创建stroe文件夹,
然后再store文件夹下面创建index,js文件,
在index.js引入组件

 
  import Vue from 'vue'
import Vuex from 'vuex'

作为插件使用
Vue.use(Vuex)

然后main.js 里面注入根实例
注入根实例
{ store }

将store在组件中使用
在store文件夹的index.js定义一个状态

 
  let store = new Vuex.Store({
	//定义应用的单一状态书,用一个对象就包含了全部的应用层级转态
	state: {
		count: 110		//定义一个状态
	}
})
 
 

在组件里面使用状态,有两种方法

 
  <script>
	export default {
		//data 只能在本组件被改变
		data() {
			return {
				n: this.$store.state.count	//n的初始值从vuex的state中拿
			}
		}
	}
</script>
 
 

或者

<p></p>

##更改状态

mutation (修改状态的唯一途径): 要使改变状态可被记录,必须要commit 一个 mutation ; mutation 必须是同步更新状态.

action (异步操作) : 异步操作产生结果 ; Action 提交的是 mutation ,而不是直接变更状态

mutation更改状态

在store中的index.js更改状态

 
  import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

//定义store
//vuex中的状态是响应的

let store = new Vuex.Store({
	state: {
		count: 110		//定义一个状态
	},
	mutations: {
		updatedCount(state, payload) {	//改变state状态
			state.count += payload.add;
		}
	}
})

export default store
 
 

commit 提交更改

 
  <script>
	export default {
		methods: {
			changeCount() 大专栏  多个计数器在Vuex中的状态ss="p">{
				this.$store.commit('updatedCount',{
					add: 30
				})
			}
		}
	}
</script>
 
 

 
  //getter(派发的状态): 抽离操作转态的逻辑,可被多组件使用
	getters : {
		totals(state){
			//reduce 数组的方法
			//reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值,0表示和初始值为0.
			return state.shopList.reduce((n,item) => n + item.count,0)
		}
	}
 
 

action (异步操作) : 异步操作产生结果; Action 提交的是mutation,而不是直接变更状态

 
  import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

//mock数据
const shopList = [
	{
		id: 123,
		count: 2,
	},
	{
		id: 456,
		count: 3
	}
]

//定义store
//vuex中的状态是响应的

let store = new Vuex.Store({
	//定义应用的单一状态书,用一个对象就包含了全部的应用层级转态
	state: {
		shopList		//定义一个状态
	},

	//getter(派发的状态): 抽离操作转态的逻辑,可被多组件使用
	getters : {
		totals(state){
			//reduce 数组的方法
			//reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值,0表示和初始值为0.
			return state.shopList.reduce((n,item) => n + item.count,0)
		}
	},

	//要使改变状态可被记录,必须要commit一个mutation; mutation必须是同步更新转态.
	mutations: {
		//只要提交mutation就有记录,如果mutation中有异步操作,记录的还是之前的值
		updatedCountById(state,payload) {	//改变state状态
			
			/*setTimeout(() => {
				let item = state.shopList.find(item => item.id == payload.id)
				item.count += 1;
			},3000);*/

			let item = state.shopList.find(item => item.id == payload.id);
			item.count += 1;
			
		},
		reduceCountById(state,payload) {
			let item = state.shopList.find(item => item.id == payload.id)
			console.log(payload)
			if(item.count <= 0 ){
				alert('数量不能少于0');
				return false;
			}
			item.count -=1;
		}
	},
	actions: {
		updateCountAction(store, parmas) {
			//异步操作放在这里
			setTimeout(() => {
				store.commit('updatedCountById', parmas)
			},1000)
		}
	}
})

export default store
 
 

vuex 使用原则

原则:

每个应用将仅仅包含一个store实例
更改store中的状态的唯一方法是提交mutation
Mutation 必须是同步函数
Action 可以包含任意异步操作
Action 提交的是mutation,而不是直接更改状态

github地址: https://github.com/yyyyama/Vue-Project