详解vuex 渐进式教程实例代码

cnpm install -g vue-cli
 vue init webpack vuex

// main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex' // 引入vuex

Vue.config.productionTip = false

Vue.use(Vuex);

let store = new Vuex.Store({ // store 对象
 state:{
  count:0
 }
})

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store, //使用store,这可以把 store 的实例注入所有的子组件
 components: { App },
 template: '<App/>'
})

// 在组件的computed中使用
 computed:{
   count(){
   return this.$store.state.count;
   }
 }

let store = new Vuex.Store({ // store 对象
 state:{
  count:0
 }
})

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
 strict:true, // 开启严格模式 确保state 中的数据只能 mutations 修改
 state:{
  count:0
 }
})
export default store;

<template>
 <div class="hello">
  <h2>{{count}}</h2>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 computed:{
   count(){
    return this.$store.state.count;
   }
 }
}
</script>

//
...
 state:{
  count:0
 },
 mutations:{ // 更改数据的方法
  add(state){
   state.count++
  },
  //提交载荷用法
//   add(state,n){ 
//   state.count += n
//  },
  sub(state){
   state.count--
  }
 }
...
//

<template>
 <div class="hello">
  <button @click="add">+</button>
  <h2>{{count}}</h2>
  <button @click="sub">-</button>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 computed:{
   count(){
    return this.$store.state.count;
   }
 },
  methods:{
  add(){
   this.$store.commit('add');
  },
  
  //提交载荷用法
  // add(){ 
  //  this.$store.commit('add',10);
  // },
  
  //对象风格的提交方式
  //  store.commit({
  //   type: 'add',
  //   n: 10
  //   })
  
  sub(){
   this.$store.commit('sub');
  }
 }
}
</script>

mutations: {
  add (state) {
   api.callAsyncMethod(() => {
  state.count++
  })
 }
}

 mutations:{ // 更改数据的方法
add(state){
   state.count++
  },
  sub(state){
   state.count--
  }
 },
++++
 actions:{
  add(context){ // context 与 store 实例具有相同方法和属性（但不是store 实例）
   setTimeout(()=>{
    context.commit('add');
   },1000)
  }
 }
++++

<template>
 <div class="hello">
  <button @click="add">+</button>
  ++++
  <button @click="add_action">action +</button>
  ++++
  <h2>{{count}}</h2>
  <button @click="sub">-</button>
  <div>
   test: {{doneTodos[0].text}} <br>
   length: {{doneTodosLength}}
  </div>
 </div>
</template>
export default {
 methods:{
  add(){
   this.$store.commit('add');
   // console.log(this);
  },
  sub(){
   this.$store.commit('sub');
  },
  ++++
  add_action(){
   this.$store.dispatch('add');
  }
  ++++
 }
}

state:{
  count:0,
  todos: [
   { id: 1, text: 'text1--true', done: true },
   { id: 2, text: 'text2--false', done: false }
  ]
 }

mutations:{ // 更改数据的方法
  add(state){
   state.count++
  },
  sub(state){
   state.count--
  }
 },
 +++
 getters:{ // 用法类似组件中的 computed, 可以认为是store的计算属性
  doneTodos:state => { // Getter 接受 state 作为其第一个参数：
   return state.todos.filter(todo => todo.done) // -> [{ id: 1, text: 'text1--true', done: true }]
  },
  // Getter 也可以接受其他 getter 作为第二个参数
  doneTodosLength:(state,getters) => {
   return getters.doneTodos.length // -> 1
  },
 +++
 }

<template>
 <div class="hello">
  <button @click="add">+</button>
  <h2>{{count}}</h2>
  <button @click="sub">-</button>
+++
  <div>
   test: {{doneTodos[0].text}} <br>
   length: {{doneTodosLength}}
  </div>
+++  
 </div>
</template>
<script>
export default {
 //...
  computed:{
  +++
    doneTodos(){
     return this.$store.getters.doneTodos // -> [{ id: 1, text: 'text1--true', done: true }]
    },
    doneTodosLength(){
     return this.$store.getters.doneTodosLength // -> 1
    }
  +++
 }
}
</script>