- npm i vue-cli -g
- vue init webpack(or others) my-project-name
- cd my-projiect-name
npm i
npm run dev
4.favicon 图标的添加
favicon.ico 在webpack.dev.conf
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
// favicon: "favicon.ico",
inject: true
})
或者在html中添加
- 添加需要的meta标签
使用less 需要安装less less-loader -D
因为在vue-loader中已经配置了，在配置中不需要配置-
vuex
store
- index.js
- state.js
- mutation-type.js
- mutations.js
- getter.js
- actions.js
Vue.use(Vuex)
const app = new Vue({
el: '#app',
// 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
store
})
- state通常通过计算属性返回状态
computed:{
count:this.$store.state.count
}
一个组件需要获取多个状态的时候
import {mapState} from 'vuex'
computed:{
...mapState(['count','someStore'])
}
- getter
有时候我们需要根据state的状态派生出一些状态，比如过滤。。
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)
}
}
})
getter相当于是store中的计算属性,Getter会暴露store.getters对象
getter可以接受其他的getter作为第二个参数
同时getter也可以返回一个函数
getter:{
doneTodoCount:(state,getters) ＝ {
return getters.doneTodos.length
}
}`
在组件中可以
computed:{
doneTodoCount(){
this.$store.getters.doneTodoCount
}
}
获取多个的getters的时候，使用mapGetters辅助函数
computed:{
...mapGetters([
'doneTodos',
'doneTodosCount'
])
}
如果想要给getter属性取另一个名字，可以使用对象的形式
computed:{
...mapGetters({
myDoneTodos : 'doneTodos'
})
}
-
mutation
更改vuex中state中的状态的唯一的方法就是提交mutation
mutation必须是同步的,不能异步提交vuex中的store状态是响应的，所以要遵循vue的响应规则（类似数组更新，对象添加的新的对象）
1.最好是在store初始化好所需要的属性
2.添加新的属性的时候
使用Vue.set(obj, 'newProp', 123)或者
新对象替换老的对象如
state.obj = {...state.obj, newProp:123 }
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
组件中提交状态
methods:{
increment(){
this.$store.commit('increment')
}
}
对象的提交方式(有点像redux的提交状态)
methods:{
increment(){
this.$store.commit({
type:'increment',
payload:{
amount:10
}
})
}
}
多个状态的提交上面的写法就有点冗余了，可以使用mapMutations
import {mapMutations} from 'vuex'
methods:{
...mapMutations([
'increment', //把this.increment() 映射位 this.$store.commit('increment'),可以在methods选项中 当作方法直接调用
'incremetBy' //把this.incrementBy(count) 映射位 this.$store.commit('incrementBy',count),可以在methods选项中 当作方法直接调用
])
...mapMutations({
add : 'increment' //把this.add() 映射为 this.$store.commit('increment')
})
}
当多人开发，大的项目中会用常量来替代mutation事件类型
//mutatoin-tyes.js
export const SOME_MUTATION = 'SOME_MUTATION'
//mutations.js
import * as types from './mutation-types.js'
const mutations = {
types[SOME_MUTATION] (state,count){
state.count = count
}
}
- action
action提交的是mutation ，而不是直接改变状态
action可以包含任意异步操作
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
action函数接受一个store实例具有相同方法和属性的context对象,
可以调用context.commit 提交一个mutation
或者context.state 获取state
或者context.getters 获取getters
但是context对象不是store实例本身
实际中经常用到es6的参数解构简化代码（特别是需要commit调用好多次的时候）
actions:{
increment({commit}){
commit('increment')
}
}
action可以是异步的
action:{
increment({commit}){
setTimeout(() => {
commit('increment')
},1000)
}
}
action的分发
store.dispatch('increment')
action在组件中的分发
this.$store.dispatch('increment',someObj)
this.$store.dispatch({
type:'increment',
someObj:{
count:10
}
})
或者使用mapActions辅助函数
import {mapActions} from 'vuex'
methods:{
...mapActions([
'increment',
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
])
...mapActions({
add:'increment'
})
}
action通常是异步的
会出现组合action
actions: {
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve()
}, 1000)
})
}
}
//现在就可以
store.dispatch('actionA').then(() => {
// ...
})
在另外一个 action 中也可以：
actions: {
// ...
actionB ({ dispatch, commit }) {
return dispatch('actionA').then(() => {
commit('someOtherMutation')
})
}
}
- async / await实现
// 假设 getData() 和 getOtherData() 返回的是 Promise
actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // 等待 actionA 完成
commit('gotOtherData', await getOtherData())
}
}