Vuex的安装与文件基础格式(vue-cli2)

这里对应的脚手架版本是(vue-cli2)

安装:npm install --save vuex@3
删除:npm uninstall vuex

1.store文件夹里的index.js(基本格式)

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
	  count:0
  },
  mutations: {
	
  },
  actions: {
	 
  }
})

export default store;

2.src里面的main.js

import Vue from 'vue'
import App from './App.vue'

// 引入路由
import router from '@/router'

// 引入仓库
import store from '@/store'

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

3.Vuex的核心概念

3.1 State

state提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储。

3.2 组件访问State中数据的第一种方式

// 这个全局数据名称就是上面index.js里面的state定义的值
this.$store.state.全局数据名称   

3.3 组件访问State中数据的第二种方式

// 在组价引入
import {mapState} from 'vuex'

// 将全局数据，映射为当前组件的计算属性
computed:{
	// 这个num就是index.js文件，在state定义的值
	...mapState(['count'])
}

4.1 Mutations

描述：State里面的值不支持直接去修改，我们只能通过Mutations去修改State里面的值

  mutations: {
	add(state){
		// 这里就是对state里面的count进行自增
		state.count++
	}
  }

4.2 组件使用Mutations的第一种方式

this.$store.commit(['add'])

4.3 组件使用Mutations的第二种方式

// 在组价引入
import {mapState,mapMutations} from 'vuex'

```c
methods:{
	// 这里引入了add，就可以在标签上直接 @click="add()"
	...mapMutations(['add'])
}