0、新创建一个项目
使用vue-cli创建项目
vue create vue-Count
?将初始的HelloWorld.vue更改成count.vue，代码如下：
<template>
<div>
<button @click="increment">点我加1</button>
<button @click="discrement">点我减1</button>
<button @click="oddcrement">点我为偶数加1</button>
<button @click="asyncincrement">点我异步加1</button>
{{count}}
</div>
</template>
<script>
//引入mapState mapActions映射属性数据和方法
import { mapState,mapActions } from "vuex"
export default {
name: 'count',
data(){
return{
// count:0
}
},
computed:{
// 如果是映射属性数据，无论是state的数据还是getters当中的方法，都映射到computed里面
...mapState(['count'])
},
methods:{
// 如果是映射方法，无论是action还是mutations的方法都映射到methods里面
...mapActions(['increment','discrement','oddcrement','asyncincrement'])
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
?功能说明：
通过vuex控制数据的更改
1、安装vuex
在建立好的vue-cli脚手架项目中安装vuex
npm i vuex -S
2、引入并使用vuex
2.1 在src路径下新建store目录--index.js文件，vue-cli会自动拿index.js文件当做入口。
index.js文件内容如下：
// 1 引入Vue
import Vue from 'vue'
// 2 引入vuex
import Vuex from 'vuex'
// 3 注册vuex插件,注意括号里面的Vuex没有双引号
Vue.use(Vuex)
// 4 Vuex的6大核心对象,（这里暂时只使用4个）state mutations actions getters
// 6 定义个个对象的属性
// 6.1 state是一个包含多个属性（不是方法）的对象，其实就是用来存储数据用的
const state ={
count:0
}
// 6.2 mutations是一个包含了多个方法的对象，用这个对象里面的方法去直接操作数据
// 不可以使用if for 异步
const mutations={
//这里的形参state就是上面定义的state对象,对应的方法名一般需要大写
INCREMENT(state){
state.count++;
}
DISCREMENT(state){
state.count--;
}
}
const actions = {
//这里的形参context为上下文对象，本质是store对象
increment(context){
context.commit('INCREMENT');
}
discrement(context){
context.commit('DISCREMENT');
},
oddcrement({commit,state}){
if(state.count%2===0){
commit('INCREMENT');
}
},
asyncincrement({commit,state}){
setTimeout(()=>{
commit('INCREMENT');
},1000);
}
}
const getters = {
}
// 5 暴露这几个对象，方便vue使用
export default new Vuex.Store({
state,mutations,actions,getters
})
2.2 在main.js中引入store并配置store
import store from '@/store' //引入store
new Vue({
el:'#app',
store, //配置store
render:h =>h(App)
})
|