关于Vuex的数据读写

Vuex定义

与我们手写的store一样，用于管理数据的工具，可以认为是一个对象。它可以帮助我们改写数据。

vuex使用

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

首先引入，并加入数据。

const store = new Vuex.Store({
  state: { // data
    count: 0
  },
  mutations: { // methods
    increment (state) {
      state.count++
    }
  }
})

其次，使用mutations，运用数据。

奇葩的地方来了。

想要使mutations生效，我们需要使用store.commit进行触发。

console.log(store.state.count)
store.commit('increment')
console.log(store.state.count)

结果为：

0
1

活学活用：

const store = new Vuex.Store({
  state: { // data
    count:0
  },
  mutations:{
    increment(state,n:number){// methods
      state.count += n
    }
  }
})
console.log(store.state.count)
store.commit('increment',10)
console.log(store.state.count)

加入参数n，想要加几就得几.

结果为：

0
10

state

单一状态树

state: { // data
    count:0
  },

官方的解释：用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源。

本质：state用一个对象包含了项目里所有组件的数据。且是唯一的数据来源。

了解getter

可以将其简单的理解为我们创建的Vuex实例的计算实行（store的计算书属性）。它会将其所依赖的数据缓存起来，当兹依赖值发生改变，才会重新计算。

使用方式：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

mutaion和action

mutation

我们需要对 state 中的数据继续操作时， 需要用到mutation。其相当于普通模板中的 methods , 通过store.commit 方法触发。

const store = new Vuex.Store({
  state: { //data
    count: 1
  },
  mutations: { //methods
    add (state) {
      // 变更状态
      state.count++
    }
  }
})

store.commit('add')

actions

与mutation非常相像。不过action的用法是异步的。他不会直接对数据进行修改，而是提交一个mutation去进行操作。

const store = new Vuex.Store({
  state: { //data
    count: 1
  },
  mutations: { //methods
    add (state) {
      // 变更状态
      state.count++
    }
  },
    actions: {
      add (context){
      context.commit('increment')
    }
  }
})

在组件中获取Vuex状态

方法一：使用computed

计算属性

 computed:{
    count(){
      return store.state.count
    }
  }

使用computed引入。计算属性可以继续实行有改变的函数。这样我们的数据就不会只执行一次了。

模板

<div>
   <button @click="add">
   +1
   </button>
   {{count}}
</div>   

触发

 add(){
    store.commit('increment',1)
  }

方法二：从Vue实例直接获取

打开store/index.ts

Vue.use(Vuex)

这串代码的意思是：把 store 绑到 Vue.prototype 上

main.ts中

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

store会被挂到Vue实例上。

这样我们可以直接使用this.$store来获取数据了。

计算属性

 computed:{
    count(){
      return this.$store.state.count
    }
  }

模板及触发

<div>
    <button @click="$store.commit('increment',1)">
      +1
    </button>
    {{count}}
</div>

vue2+ts配合使用Vuex的bug

前面说到了，我们获取数据使用computed来使用的。

然而当我们使用ts的装饰器：vue-property-decorator。bug就会出现了，具体表现为：computed下引入的state无法被当前组件的方法获取。

于是我再搜索了vue-class-component, 它使用了原生自带的get和set函数。

使用如下：

store/index.ts的数据

const store = new Vuex.Store({
  state: { // data
    count:0
  })

组件中使用：

get count(){
   return this.$store.state.count
}

一般用get比较多，所以只举了get的例子。

具体可以查看：vue-class-component