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: ''
})

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







// 通过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






    
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({commit}) {
            commit('newData','是异步 ')
        }
})

// content






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

你可能感兴趣的:(vuex基本使用)