vuex基本使用

vuex使用

1、安装vuex

npm install vuex --save

2、安装promise：

Vuex 依赖 Promise。如果你支持的浏览器并没有实现 Promise (比如 IE)，那么你可以使用一个 polyfill 的库，例如 es6-promise。将下列代码添加到你使用 Vuex 之前的一个地方：

import 'es6-promise/auto'

3、创建一个store仓库

const store = new Vuex.Store({
  state: {
    count: 2
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

4、在构建实例app这里引用

new Vue({
  el: '#app',
  router,
  store,//这里引用
  components: { App },
  template: '<App/>'
})

5、通过store.state 来获取状态对象

this.$store.state.count//因为state是响应式的，最好放在computer里面

console.log（this.$store.state.count）//2

6、通过commit显示提交来更改state里面的状态

this.$store.commit('increment')//1、通过commit显示提交 2、提交带上提交的方法并且加上引号（总是忘记引号）

vuex基本使用（二）--创建静态数据（state）

// 创建一个store.js仓库

import Vue from 'vue';
import Vuex from 'vuex';// 引用vuex；

Vue.use(Vuex);//使用Vuex

export default new Vuex.Store({ // 像外界导出一个new Store
    state: { //  存放数据类似于data的静态数据
     count: '小西瓜' 
    },
    mutations: { //写方法，类似于method，只能同步
        h t
    }，
    action: { // 写方法，异步
          
    }
    
})

// 在main.js中挂载 store

import Vue from 'vue';
import App from './App';
import store from './store';
Vue.config.productionTip = false   //生产环境提示，这里设置成了false

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

//在组件（模版引擎中）使用store静态数据

this.$store.state.count

修改静态数据（mutations）

// 在store.js

import Vue from 'vue';
import Vuex from 'vuex'; // 引用vuex；

Vue.use(Vuex);//使用Vuex

export default new Vuex.Store({ // 像外界导出一个new Store
    state: { //  存放数据类似于data的静态数据
     count: '小西瓜' 
    },
    mutations: { //写方法，类似于method,同步
        newData(state,parmas) { // 修改--第一个参数是state，第二个参数是事件触发接受参数
            state.count = '小傻瓜'+parmas
        }
    }，
    action: { // 写方法,类似于method,异步
          
    }
    
})

// 在content.vue
<template>
 <div class="page">
   <button @click="test()">123131331</button>
   <p>{{this.$store.state.count}}</p>
   <p>{{this.$store.state.data}}</p>
 </div>
</template>

<script>
export default {
 data () {
    return {

    }
 },
 components: {
 },
 methods: {
   test() {
     this.$store.commit(newData,'敲可爱') // 第一个参数是需要触发的事件，第二个是传递的
   }
 }
}
</script>

<style scoped lang="less">
</style>


// 通过this.$store.commit('newData','敲可爱')修改数据

得到静态数据(getter)

import Vue from 'vue';
import Vuex from 'vuex';// 引用vuex；

Vue.use(Vuex);//使用Vuex

export default new Vuex.Store({ // 像外界导出一个new Store
    state: { //  存放数据类似于data的静态数据
     count: '小西瓜' ,
     data: '我是新数据'
    },
    mutations: { //写方法，类似于method
        
    }，
    getters: {
        addCount(state) {
            return state.count + '小西瓜啦啦啦'
        }
    }
    
})



// 在content.vue
<template>
 <div class="page">
   <button @click="test()">123131331</button>
   <p>{{this.$store.state.count}}</p>
   <p>{{this.$store.getters.addCount}  }</p>
 </div>
</template>

<script>
export default {
 data () {
    return {

    }
 },
 components: {
 },
 methods: {
   test() {
     this.$store.commit(newData,'敲可爱') // 第一个参数是需要触发的事件，第二个是传递的
   }
 }
}
</script>

<style scoped lang="less">
</style>

    

Actions

import Vue from 'vue';
import Vuex from 'vuex';// 引用vuex；

Vue.use(Vuex);//使用Vuex

export default new Vuex.Store({ // 像外界导出一个new Store
    state: { //  存放数据类似于data的静态数据
     count: '小西瓜' ,
     data: '我是新数据'
    },
    mutations: {
        newData(state,parmas) { // 修改--第一个参数是state，第二个参数是事件触发接受参数
            state.count = '小傻瓜'+parmas
        }
    }，
    getters: {
        addCount(state) {
            return state.count + '小西瓜啦啦啦'
        }
    },
    actions: { // 可以在时间函数里面使用，比如想几秒以后调用
        
        <!--addCount(context) {-->
        <!--    context.commit('newData','是异步 ')-->
        <!--}-->
        
        等同于结构赋值
        addCount({commit}) {
            commit('newData','是异步 ')
        }
})

// content

<template>
 <div class="page">
   <button @click="test()">123131331</button>
   <p>{{this.$store.state.count}}</p>
   <p>{{this.$store.getters.addCount}  }</p>
 </div>
</template>

<script>
export default {
 data () {
    return {

    }
 },
 components: {
 },
 methods: {
   test() {
     //this.$store.commit(newData,'敲可爱') // 第一个参数是需要触发的事件，第二个是传递的
     this.$store.dispatch('newData')
   }
 }
}
</script>

<style scoped lang="less">
</style>

写的有点啰嗦哈，这是我自己的以前的笔记，写的还是比较详细，希望能帮助到需要帮助的人