一、安装
NPM
npm install vuex --save
Yarn
yarn add vuex
在main.js引入使用
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
创建store文件夹，里面创建一个js文件 store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) // 必须显式地通过 Vue.use() 来安装 Vuex
export default new Vuex.Store({
state: {
addCount: 0, // 显示的数值
subCount: 1
},
mutations: {
},
actions: {
},
modules: {
}
})
二、开始使用（显示）---state
在vue中state有三种用法(显示)
第一种
<div>增加的数量1：{{$store.state.addCount}}</div>
第二种
<div>减少的数量：{{countTest}}</div>
<script>
export default {
data() {
return {
countTest: null
}
},
mounted() {
this.countTest = this.$store.state.subCount;
},
}
</script>
第三种
<div>增加的数量2：{{addCount}}</div>
<script>
import {mapState} from 'vuex'
export default {
computed: {
...mapState(['addCount'])
},
}
</script>
三、Mutation
Mutation用于变更Store中的数据
① 只能通过mutation变更Store数据，不可以直接操作Store中的数据。
② 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。
mutations: {
/*
add 函数接收两个参数
state: store里面的state对象（和mutition平级的state）
data: 外界传入的值，可以随意命名，a,b,c都可以
*/
add(state,data) {
// 每点击一次，在原来的基础上加 data数值
state.addCount += data;
}
},
触发mutations的第一种方式
methods: {
handleAdd() {
// commit 的作用， 就是调用某个 mutation 函数
this.$store.commit('add',2)
}
},
触发mutations的第二种方式
export default new Vuex.Store({
state: {
addCount: 0, // 显示的数值
subCount: 1,
aTest: '我是测试1'
},
mutations: {
/*
add 函数接收两个参数
state: store里面的state对象（和mutition平级的state）
data: 外界传入的值，可以随意命名，a,b,c都可以
*/
add(state,data) {
// 每点击一次，在原来的基础上加 data数值
state.addCount += data;
},
sub(state,step) {
state.aTest = step;
}
},
})
<script>
// 从vuex 中 按需导入 mapMutations 函数
import {mapState, mapMutations} from 'vuex'
export default {
computed: {
...mapState(['addCount'])
},
// 通过导入的mapMutations函数，将需要的mutations函数，映射为当前组件的methods方法
methods: {
// 讲指定的mutations 函数，映射为当前组件的methods 函数
...mapMutations(['sub']),
handleAdd() {
this.$store.commit('add',2)
},
handleTihuan() {
this.sub('嘿嘿嘿！！！')
}
},
}
</script>
四、Actions
Actions 用于处理异步任务。
如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，但是在Action中还是要通过触发Mutation的方式间接变更数据。
触发actions的第一种方式：
export default new Vuex.Store({
state: {
addCount: 0, // 显示的数值
},
mutations: {
add(state) {
state.addCount += 1;
},
},
actions: {
asyncAdd(context) {
setTimeout(()=>{
context.commit('add')
},1000)
}
},
})
-----------------
methods: {
handleAdd() {
this.$store.dispatch('asyncAdd') // store 里面的方法名是哪个就在dispatch里面写哪个方法名
},
},
触发actions异步任务时携带参数:
actions: {
asyncAdd(context,step) {
setTimeout(()=>{
context.commit('add',step)
},1000)
}
}
-----
this.$store.dispatch('asyncAdd',2)
触发actions的第二种方式：
actions: {
asyncSub(context,step) {
setTimeout(()=>{
context.commit('sub',step)
},1000)
}
},
------
import {mapState, mapMutations, mapActions} from 'vuex'
methods: {
...mapMutations(['sub']),
...mapActions(['asyncSub']),
handleSub() {
this.asyncSub(1);
},
},
------
// 或者直接在DOM元素中使用
<div>减少的数量：{{$store.state.subCount}}</div>
<!-- <el-button type="warning" @click="handleSub">减少</el-button> -->
<el-button type="warning" @click="asyncSub(2)">减少</el-button>
五、Getters
Getters用于对Store中的数据进行加工处理形成新的数据
① Getters 可以对Store 中已有的数据加工处理之后形成新的数据，类似于Vue的计算属性。
② Store 中数据发生变化，Getters 的数据也会跟着变化。
使用getters的第一种方式：
getters: {
// 这里的state 是store 里面state
showNumber: state => {
return '当前最新的数据是【'+ state.testCount +'】'
}
},
-----------
// this.$store.getters.名称
this.$store.getters.showNumber
使用getters的第二种方式：
import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'
--------------
computed: {
...mapGetters(['showNumber'])
},
-----------
<div>{{showNumber}}</div>
后续可能还有更新。。。
网友评论