vuex的基本使用
一、简单实用vuex
1.通过命令npm install vuex --save
下载vuex
2.在main.js文件中
//引入vuex组件
import Vuex from 'vuex'
//使用vuex组件
Vue.use(Vuex)
//创建vuex实例
const store = new Vuex.Store({
//定义数据
state:{
count:0
}
})
//在vue实例中使用
new Vue({
store
...
})
3.在文件中使用数据,可以直接通过计算属性获取vuex值
computed:{
count(){
return this.$store.state.count
}
}
4.可以直接通过赋值this.$store.state.count
方法改变vuex值(不推荐,见后面)
二、将vue封装成一个组件
1.新建一个文件命名为store.js
内容如下:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 1
}
})
2.在main.js
中引入文件,并使用
import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App)
}).$mount('#app')
三、vuex进阶:getters/mutations/actions
1.getters获取数据并做一些逻辑运算
我们可以在vuex中使用getters来做一些重复性的运算如下
new Vuex.Store({
state: {
count: 0
},
getters:{
//获取双倍的count
doubleCount(state){
return state.count*2
}
}
})
在页面中,可以通过this.$store.getters.doubleCount
获取到上面的双倍count
2.mutations数据状态管理
在vuex中,可以直接通过this.$store.state.count
来修改数据,但是vuex是不希望我们直接这么做的,因为这样我们无法追踪到数据变化的状态,于是我们需要使用mutations来实现数据改变状态管理,如下:
new Vuex.Store({
state: {
count: 0
},
mutations:{
//count加1
addCount(state){
state.count++;
},
//count减法操作带传值
decCount(state,num){
state.count-=num;
}
}
})
在页面通过调用this.$store.commit("addCount")
来操作vuex里面的数据
通过调用传值this.$store.commit("decCount",5)
实现每次减5的操作,注意,需要传多个值的话,只需要将第二个参数改为对象即可
这样,vuex中改变的数据可以在浏览器里的vue管理工具上查看改变的状态
注意:mutations内必须为同步的代码
3.actions异步管理数据
当遇到一些异步操作时,我们可以通过actions来管理
new Vuex.Store({
state: {
count: 0
},
getters: {
//获取双倍的count
doubleCount(state) {
return state.count * 2
}
},
mutations: {
//count加1
addCount(state) {
state.count++;
},
//count减1
decCount(state) {
state.count--;
}
},
actions: {
actionsIncrease(context) {
setTimeout(() => {
//context为当前上下文
context.commit("decCount", 5)
}, 1000)
}
}
})
在页面通过调用this.$store.dispatch("actionsIncrase")
来操作vuex里面的数据(若是需要传值,与mutations相同)