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相同）